@import "../../helpers";
.sf-personal-details {
  .title {
    --heading-padding: var(--spacer-xl) 0 var(--spacer-base);
    --heading-title-font-weight: var(--font-weight--bold);
    --heading-title-font-size: var(--h3-font-size);
    @include for-desktop {
      --heading-title-font-weight: var(--font-weight--semibold);
      --heading-padding: var(--spacer-xl) 0;
    }
  }
  .log-in {
    &__info {
      margin: 0;
      color: var(--c-dark-variant);
      font: var(--font-weight--medium) var(--font-size--base) / 1.6
        var(--font-family--secondary);
      @include for-desktop {
        font-weight: var(--font-weight--normal);
      }
    }
    &__button {
      margin: var(--spacer-xl) 0 var(--spacer-base) 0;
      @include for-desktop {
        margin: var(--spacer-xl) 0;
        --button-width: 25rem;
      }
    }
  }
  .info {
    &__heading {
      font-family: var(--font-family--secondary);
      font-weight: var(--font-weight--medium);
      color: var(--c-link);
      margin-bottom: var(--spacer-base);
    }
    &__characteristic {
      --characteristic-description-font-size: var(--font-size--base);
      margin: 0 0 var(--spacer-base) var(--spacer-2xs);
    }
    @include for-desktop {
      width: 37.5rem;
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      &__heading {
        flex: 100%;
        margin: 0 0 var(--spacer-lg) 0;
      }
      &__characteristic {
        margin: 0 0 var(--spacer-2xs) 0;
        flex: 0 50%;
        box-sizing: border-box;
        padding-right: var(--spacer-3xl);
        &:nth-of-type(2),
        &:nth-of-type(3) {
          padding-right: var(--spacer-2xl);
        }
      }
    }
  }
  .form {
    &__element {
      --input-padding: var(--spacer-sm) 0 var(--spacer-2xs) 0;
      margin: 0 0 var(--spacer-base) 0;
    }
    &__checkbox {
      margin: var(--spacer-base) 0 var(--spacer-xl);
      --checkbox-font-family: var(--font-family--primary);
      --checkbox-font-size: var(--font-size--base);
    }
    &__action-button {
      &:first-child {
        margin: var(--spacer-sm) 0 0 0;
      }
      &--secondary {
        margin: var(--spacer-base) 0;
      }
      @include for-desktop {
        --button-width: 25rem;
      }
    }
    @include for-desktop {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      &__element {
        margin: 0 0 var(--spacer-base) 0;
        flex: 0 0 100%;
        &--half {
          flex: 1 1 50%;
          &-even {
            padding: 0 0 0 var(--spacer-base);
          }
        }
      }
      &__checkbox {
        margin: var(--spacer-lg) 0 var(--spacer-xl);
      }
    }
  }
}