@import "./mixin.less";

.setting-dialog {
  @apply px-4;

  > .dialog-container {
    @apply w-180 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-col sm: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 hover:shadow;

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

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

        > .section-title {
          @apply text-sm mt-2 sm:mt-4 first:mt-3 mb-1 font-mono text-gray-400;
        }

        > .section-items-container {
          @apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;

          > .section-item {
            @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 cursor-pointer hover:opacity-80;

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

            > .icon-text {
              @apply text-base mr-2;
            }
          }
        }
      }

      > .section-content-container {
        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
        .hide-scroll-bar();

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

          > .title-text {
            @apply text-sm mb-3 font-mono text-gray-500;
          }

          > .form-label {
            @apply flex flex-row justify-start items-center w-full mb-2;

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