/// Phone dropdown.
///
/// @group dropdowns
///
/// @example scss - usage
///   @include k-PhoneDropdown;
///
/// @example html
///   <div class="k-PhoneDropdown">
///     <p class="k-PhoneDropdown__text">
///       <a class="k-PhoneDropdown__link">…</a>
///     </p>
///   </div>

@mixin k-PhoneDropdown {
  $font-color: map-get($k-colors, 'font-1');

  .k-PhoneDropdown {
    background: map-get($k-colors, 'background-2');
    border: 1px solid map-get($k-colors, 'line-1');
    padding: k-px-to-rem(10px) 0;
    text-align: center;

    @include k-typographyFontSize(0);
    @include k-typographyFont('light');

    @include k-media-xs {
      border-left: none;
      border-right: none;
    }
  }

  .k-PhoneDropdown__text {
    margin-top: k-px-to-rem(5px);
    margin-bottom: k-px-to-rem(5px);
  }

  .k-PhoneDropdown__arrow {
    @include k-dropdownArrow;
  }

  .k-PhoneDropdown__link {
    color: $font-color;
    text-decoration: none;

    &:active,
    &:focus,
    &:hover {
      color: $font-color;
      text-decoration: none;
    }
  }
}