@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;

$classname: '#{utils.$prefix}-breadcrumbs';
// Size variables
$min-height: tokens.$spacing-base-6;
$size-icon: tokens.$spacing-base-3;
$margin-icon: tokens.$spacing-base-3;

@mixin separatorIcon {
  content: '';
  display: inline-block;
  box-sizing: border-box;

  align-self: center;

  width: $size-icon;
  height: $size-icon;

  background-image: #{utils.$icon-url-chevron-right};
  background-repeat: no-repeat;
  background-position: 50%;
}

.#{$classname} {
  box-sizing: border-box;

  &__list {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin: 0;
    padding: 0;
  }

  &__item {
    display: flex;
    flex-direction: row;
    align-items: center;

    min-height: $min-height;

    list-style: none;

    & .#{utils.$prefix}-link,
    .#{$classname}__text {
      @include typography.text-interface-300();
    }

    &::after {
      @include separatorIcon();
      margin: 0 $margin-icon;
    }

    &:last-child::after {
      display: none;
    }
  }

  // Breakpoints
  @media (max-width: tokens.$breakpoint-medium) {
    // Show only parent link in breadcrumbs
    .#{$classname}__list > li {
      display: none;
    }
    .#{$classname}__list > li:nth-last-of-type(2) {
      display: flex;
      // Remove icon after
      &::after {
        display: none;
      }
      // Add icon before
      &::before {
        @include separatorIcon();
        margin: 0 $margin-icon 0 0;
      }
    }
  }
}