@use 'sass:map';
@use '../utils/tokens.scss';
@use '../utils/constants.scss';

@import '@viasat/beam-tokens/components/Breadcrumb';

$breadcrumbsBaseClass: '#{constants.$prefix}breadcrumbs';
$truncation-width: var(
  --#{constants.$prefix}comp-breadcrumbs-truncation-width,
  auto
);
$linkSecondaryColor: '--#{constants.$prefix}sem-color-link-secondary';
$linkPrimaryHoverColor: '--#{constants.$prefix}comp-link-color-primary-hover';
$linkSecondaryActiveColor: '--#{constants.$prefix}comp-link-color-secondary-active';
$semOpacityDisabled: '--#{constants.$prefix}sem-opacity-disabled';

.#{$breadcrumbsBaseClass} {
  &__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: tokens.$bm-comp-breadcrumb-space-gap;
  }

  &__item {
    display: flex;
    align-items: center;
    gap: tokens.$bm-comp-breadcrumb-space-gap;
  }

  &__link {
    #{$linkSecondaryColor}: #{tokens.$bm-comp-breadcrumb-color-enabled};

    &:hover {
      #{$linkPrimaryHoverColor}: #{tokens.$bm-comp-breadcrumb-color-hover};
    }

    &:active {
      #{$linkSecondaryActiveColor}: #{tokens.$bm-comp-breadcrumb-color-active};
    }

    &.bm-link--disabled {
      cursor: pointer;
      #{$semOpacityDisabled}: 1;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__icon {
    flex-shrink: 0;
    display: inline-flex;

    ::slotted([slot='icon']) {
      color: tokens.$bm-comp-breadcrumb-color-enabled;
      width: tokens.$bm-comp-link-size-sm-icon;
      height: tokens.$bm-comp-link-size-sm-icon;
      display: inline-flex;
    }

    &--current {
      // Since we use link under the hood, we need to make sure the icon is the same size as the links
      width: tokens.$bm-comp-link-size-sm-icon;
      height: tokens.$bm-comp-link-size-sm-icon;
      color: tokens.$bm-comp-breadcrumb-color-selected;
    }
  }

  &__separator {
    min-width: tokens.$bm-comp-breadcrumb-size-icon-chevron;
    min-height: tokens.$bm-comp-breadcrumb-size-icon-chevron;
    max-width: tokens.$bm-comp-breadcrumb-size-icon-chevron;
    max-height: tokens.$bm-comp-breadcrumb-size-icon-chevron;
    color: tokens.$bm-comp-breadcrumb-color-enabled;

    [dir='rtl'] & {
      transform: rotate(180deg);
    }
  }

  &__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;

    [dir='rtl'] & {
      unicode-bidi: plaintext;
    }
  }

  &__current {
    color: tokens.$bm-comp-breadcrumb-color-selected;
    font: tokens.$bm-comp-breadcrumb-typo-default;

    display: flex;
    align-items: center;
    gap: tokens.$bm-comp-breadcrumb-space-gap;
  }

  &__item--ellipsis {
    color: tokens.$bm-comp-breadcrumb-color-enabled;

    :focus-visible {
      outline: tokens.$bm-sem-border-width-focus solid
        tokens.$bm-sem-color-border-focus;
      border-radius: tokens.$bm-sem-radius-focus-md;
    }
  }

  &--wrap {
    .#{$breadcrumbsBaseClass}__list {
      flex-wrap: wrap;
    }
  }

  :host(*) &__text {
    color: tokens.$bm-comp-breadcrumb-color-enabled;

    &:hover {
      color: tokens.$bm-comp-breadcrumb-color-hover;
    }

    &:active {
      color: tokens.$bm-comp-breadcrumb-color-active;
    }
  }
}

::part(link) {
  max-width: $truncation-width;
  #{$linkSecondaryColor}: #{tokens.$bm-comp-breadcrumb-color-enabled};
}

:host-context([dir='rtl']) {
  .#{$breadcrumbsBaseClass} {
    &__text {
      unicode-bidi: plaintext;
    }

    &__separator {
      transform: rotate(180deg);
    }
  }
}