@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/spacing";
@use "components/links/link/mixins";

.ods-service-link {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: row;

  &--focus,
  &:focus-visible {
    box-shadow: 0 0 0 0.125rem colors.$blue-state;
    outline-offset: 0.125rem;
    outline: 0.25rem solid colors.$purple-light;
  }

  &__icon {
    @extend %ods-text--size-hotel, %ods-text--size-foxtrot-breakpoint-medium, %ods-text--size-delta-breakpoint-large;
    @extend %ods-margin-right-4;

    line-height: 2rem !important;

    @include breakpoints.medium {
      line-height: 2.125rem !important;
    }

    @include breakpoints.large {
      line-height: 2.25rem !important;
    }
  }

  &__content {
    & .ods-service-link__heading {
      @extend %ods-text--size-india, %ods-text--size-hotel-breakpoint-medium, %ods-text--size-golf-breakpoint-large;
      @extend %ods-text--weight-medium;

      display: inline-block;
    }

    & .ods-service-link__text {
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
      @extend %ods-text--weight-light;
    }
  }

  @include mixins.states {
    .ods-service-link__content .ods-service-link__heading {
      text-decoration: underline;
    }
  }

  &--external {
    & .ods-service-link__content .ods-service-link__heading {
      @include mixins.icon-right("new-window");
    }
  }
}