@import "./mixin.less";
@import "./memos-header.less";

.setting-dialog {
  > .dialog-container {
    @apply w-168 max-w-full mb-8 p-0;

    > .dialog-content-container {
      .flex(column, flex-start, flex-start);
      @apply relative w-full overflow-y-scroll p-0 flex flex-row justify-start items-start;
      .hide-scroll-bar();

      > .close-btn {
        .flex(column, center, center);
        @apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200;

        > .icon-img {
          @apply w-5 h-5;
        }
      }

      > .section-selector-container {
        @apply w-40 h-full shrink-0 rounded-l-lg p-4 bg-gray-100 flex flex-col justify-start items-start;

        > .section-item {
          @apply text-sm left-6 mt-2 cursor-pointer hover:opacity-80;

          &.selected {
            @apply font-bold hover:opacity-100;
          }
        }
      }

      > .section-content-container {
        @apply w-auto p-4 grow flex flex-col justify-start items-start;

        > .section-container {
          .flex(column, flex-start, flex-start);
          @apply w-full my-2;

          > .title-text {
            @apply text-base font-bold mb-2;
            color: @text-black;
          }

          > .form-label {
            .flex(row, flex-start, center);
            @apply w-full text-sm mb-2;

            > .normal-text {
              @apply shrink-0;
            }
          }
        }
      }
    }
  }
}