@import '../../../scss/styles.scss';

@layer payload-default {
  .auth-fields {
    padding: calc(var(--base) * 2);
    background: var(--theme-elevation-50);
    display: flex;
    flex-direction: column;
    gap: var(--base);

    &__controls {
      display: flex;
      align-items: center;
      gap: calc(var(--base) / 2);
      flex-wrap: wrap;
    }

    &__changing-password {
      display: flex;
      flex-direction: column;
      gap: var(--base);
    }

    .btn {
      margin: 0;
    }

    &__api-key-label {
      position: relative;
    }

    @include mid-break {
      padding: var(--base);
      gap: calc(var(--base) / 2);

      &__changing-password {
        gap: calc(var(--base) / 2);
      }
    }

    .field-type.api-key {
      margin-bottom: var(--base);

      input {
        @include formInput;
        width: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .api-key {
      &__input-wrap {
        display: flex;
        align-items: center;
      }

      &__toggle-button-wrap {
        display: flex;
        align-self: stretch;
      }

      &__toggle-button {
        @include formInput;
        background: var(--theme-elevation-100);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin: 0 0 0 -1px;
        padding: 0 calc(var(--base) / 2);
        box-shadow: none;
        --btn-icon-size: var(--base);
      }
    }
  }

  @keyframes highlight {
    0% {
      background: var(--theme-success-250);
      border: 1px solid var(--theme-success-500);
    }

    20% {
      background: var(--theme-input-bg);
      border: 1px solid var(--theme-elevation-250);
      color: var(--theme-text);
    }

    80% {
      background: var(--theme-input-bg);
      border: 1px solid var(--theme-elevation-250);
      color: var(--theme-text);
    }

    100% {
      background: var(--theme-elevation-200);
      border: 1px solid transparent;
      color: var(--theme-elevation-400);
    }
  }

  .highlight {
    animation: highlight 10s;
  }
}