@import "./mixin.less";

.account-section-container {
  > .form-label {
    min-height: 28px;

    > .normal-text {
      @apply first:mr-2;
    }

    &.username-label {
      > input {
        flex-grow: 0;
        width: 128px;
        padding: 0 8px;
        font-size: 14px;
        border: 1px solid lightgray;
        border-radius: 4px;
        line-height: 26px;
        background-color: transparent;

        &:focus {
          border-color: black;
        }
      }

      > .btns-container {
        .flex(row, flex-start, center);
        margin-left: 8px;
        flex-shrink: 0;

        > .btn {
          font-size: 12px;
          padding: 0 16px;
          border-radius: 4px;
          line-height: 28px;
          margin-right: 8px;
          background-color: lightgray;

          &:hover {
            opacity: 0.8;
          }

          &.cancel-btn {
            background-color: unset;
          }

          &.confirm-btn {
            background-color: @text-green;
            color: white;
          }
        }
      }
    }

    &.password-label {
      > .btn {
        @apply text-blue-600 ml-1 cursor-pointer hover:opacity-80;
      }
    }
  }
}

.openapi-section-container {
  > .value-text {
    width: 100%;
    border: 1px solid lightgray;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
  }

  > .reset-btn {
    @apply mt-2 py-1 px-2 bg-red-50 border border-red-500 text-red-600 rounded leading-4 cursor-pointer text-xs select-none hover:opacity-80;
  }

  > .usage-guide-container {
    .flex(column, flex-start, flex-start);
    @apply mt-2 w-full;

    > .title-text {
      @apply my-2 text-sm;
    }

    > pre {
      @apply w-full bg-gray-50 py-2 px-3 text-sm rounded whitespace-pre-wrap;
    }
  }
}
