@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((breadcrumb))} {
  color: #{getValName((breadcrumb, color))};
  overflow: hidden;
}

#{getClassName((breadcrumb, item))} {
  display: flex;
  float: left;

  &.is-link {
    #{getClassName((breadcrumb, item, bd))} {
      cursor: pointer;
      font-weight: bold;

      &:hover {
        color: #{getValName((breadcrumb, hover, color))};
      }
    }
  }

  #{getClassName((breadcrumb, item, ft))} {
    font-size: 0.856em;
    padding: #{getValName((breadcrumb, item, padding))};
  }
  &:last-child {
    #{getClassName((breadcrumb, item, ft))} {
      display: none;
    }
  }
}

#{getClassName((breadcrumb))} {
  #{joinValName((breadcrumb, item, padding))}: var(--os-space-none) var(--os-space-s);
  @include set-css-val(breadcrumb,
    (color: (color, neutral, 9), hover-color: (color, primary)))
}