@import '../../../../styles/vendor/bootstrap_foundation-sites';

$m-contact-list__contact-spacing: 1.25rem;
$m-contact-list__nav-alpha-color: #ccc;
$m-contact-list__nav-alpha-color--active: #9a9a9a;

.m-contact-list {
  &__nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem; // fixed height
    margin-right: map_get($co-margin_, 'xsmall');
    margin-left: map_get($co-margin_, 'xsmall');
  }

  &__alpha-letter {
    color: $m-contact-list__nav-alpha-color;
    font-weight: 400;
    text-decoration: none;
    text-transform: capitalize;

    &--active {
      color: $m-contact-list__nav-alpha-color--active;
      font-weight: 600;
    }
  }

  &__list {
    margin-bottom: 2.25rem;
  }

  &__alpha-title {
    margin-right: map_get($co-margin_, 'xsmall');
    margin-left: map_get($co-margin_, 'xsmall');

    // usefull for anchor position without incidences
    padding-top: rem-calc($co-component__height + 0.5rem);
    color: $m-contact-list__nav-alpha-color--active;
  }

  &__contact {
    padding-top: $m-contact-list__contact-spacing;
    padding-bottom: $m-contact-list__contact-spacing;
    border-bottom: 1px solid $co-color__fg__border--higher;
  }

  @include breakpoint(medium) {
    &__contact {
      margin-right: map_get($co-margin_, 'large');
      margin-left: map_get($co-margin_, 'large');
    }

    &__nav {
      margin-right: map_get($co-margin_, 'large') / 2;
      margin-left: map_get($co-margin_, 'large') / 2;
    }

    &__alpha-title {
      margin-right: map_get($co-margin_, 'medium');
      margin-left: map_get($co-margin_, 'medium');
    }
  }

  @include breakpoint(large) {
    &__contact {
      margin-right: map_get($co-margin_, 'xlarge');
      margin-left: map_get($co-margin_, 'xlarge');
    }
  }
}
