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

.auth-fields {
  padding: 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: $baseline;

  input {
    @include formInput;
  }
}

@keyframes highlight {
  0% {
    background: var(--theme-success-500);
  }

  100% {
    background: none;
  }
}

.highlight {
  animation: highlight 10s;
}