@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$breadcrumb: () !default;
$breadcrumb: map.merge(
  (
    b-color: value('border-color-base'),
    b-color-hover: value('color-primary-light-1'),
    border-shape: value('border-shape'),
    radius: value('radius-base'),
    v-padding: 4px,
    h-padding: 8px,
    v-padding-border: 4px,
    h-padding-border: 8px,
    padding-border: value('breadcrumb-v-padding-border') value('breadcrumb-h-padding-border'),
    item-bg-color: transparent,
    item-bg-color-hover: value('color-primary-opacity-9'),
    item-b-color: transparent,
    item-b-color-hover: value('color-primary-opacity-6'),
    item-radius: value('radius-small'),
    label-color: inherit,
    label-color-hover: value('color-primary-base'),
    separator-color: value('content-color-placeholder'),
    separator-color-hover: value('color-primary-base')
  ),
  $breadcrumb
);

.#{$namespace}-breadcrumb {
  &-vars {
    @include define-preset-values('breadcrumb', $breadcrumb);
  }

  $border-a: value('breadcrumb-border-shape');

  @include basis {
    position: relative;
    display: flex;
    align-items: center;
    padding: value('breadcrumb-v-padding') value('breadcrumb-h-padding');
    margin: 0;
    list-style: none;
  }

  &--border {
    padding: value('breadcrumb-padding-border');
    border: $border-a value('breadcrumb-b-color');
    border-radius: value('breadcrumb-radius');
    transition: value('transition-border');

    &:hover {
      border-color: value('breadcrumb-b-color-hover');
    }
  }

  &__item {
    display: flex;
    align-items: center;
    background-color: value('breadcrumb-item-bg-color');
    border: $border-a value('breadcrumb-item-b-color');
    border-radius: value('breadcrumb-item-radius');
    transition: value('transition-background'), value('transition-border');
  }

  &--border &__item:hover {
    background-color: value('breadcrumb-item-bg-color-hover');
    border-color: value('breadcrumb-item-b-color-hover');
  }

  &__label {
    padding: 0 6px;
    color: value('breadcrumb-label-color');
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('breadcrumb-label-color-hover');
    }
  }

  &__separator {
    display: inline-flex;
    padding: 0 6px;
    color: value('breadcrumb-separator-color');
    cursor: pointer;
    user-select: none;
    border-inline: $border-a transparent;
    transition: value('transition-color'), value('transition-border');

    &:hover {
      color: value('breadcrumb-separator-color-hover');
    }
  }

  &__item:last-child &__separator {
    display: none;
  }

  &--border &__item:hover &__separator {
    border-inline-start-color: value('breadcrumb-item-b-color-hover');
  }
}