@import "../mixin.less";

.member-section-container {
  > .create-member-container {
    @apply w-full flex flex-col justify-start items-start;

    > .input-form-container {
      @apply w-full mb-3 flex flex-row justify-start items-center;

      > .field-text {
        @apply text-sm text-gray-600 w-20 text-right pr-2;
      }

      > input {
        @apply border rounded text-sm leading-7 shadow-inner px-2;
      }
    }

    > .btns-container {
      @apply w-full mb-6 pl-20 flex flex-row justify-start items-center;

      > button {
        @apply border text-sm px-3 rounded leading-7 shadow hover:opacity-80;
      }
    }
  }

  > .field-container {
    > .field-text {
      @apply text-gray-400 text-sm;
    }
  }

  > .member-container {
    @apply w-full grid grid-cols-4 border-b py-2;

    > .field-text {
      @apply text-base pl-2 mr-4 w-16 truncate;

      &.id-text {
        @apply font-mono text-gray-600;
      }

      &.email-text {
        @apply w-auto col-span-2;
      }
    }

    > .buttons-container {
      @apply col-span-1 flex flex-row justify-end items-center;

      > .tip-text {
        @apply text-gray-400;
      }
    }
  }
}