@use "../theme.scss" as *;
@use "../icon.scss" as *;

.breadcrumb-nav {
  & ol {
    list-style: none;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    margin-bottom: $block-elem-vertical-gap;
    display: flex;
    flex-direction: row;
    align-items: center;

    & li {
      font-weight: bold;
      font-size: 0.98em;
      display: flex;
      align-items: center;

      & a {
        color: $breadcrumb-label-color;
      }

      & .breadcrumb-nav-item-label {

        & + .breadcrumb-nav-divider {
          color: $breadcrumb-divider-color;
          padding-left: 0.5em;
          padding-right: 0.5em;
        }
      }

      & a:hover,
      & a:focus-visible {
        outline: none;
        color: $breadcrumb-label-hover-color;
        text-decoration: underline;
      }

      &.selected {
        cursor: default;
        background: transparent;
        border: 0;

        & a,
        & .breadcrumb-nav-item-label {
          color: $breadcrumb-label-selected-color;
        }
      }
    }
  }
}