@import '@angular/material';
// Breadcrumb mixin
// Use theme to manage colors on breadcrumb component
@mixin mic-breadcrumb-override($theme) {
  $primary: map-get($theme, primary);
  $white: $mic-text-colors-normal-light;
  $accent: map-get($theme, accent);
  $is-dark: map-get($theme, is-dark);
  $textColor: $dark-primary-text;

  @if $is-dark {
    $white: $mic-text-colors-normal;
    $textColor: $light-primary-text;
  }

  nav {
    ol {
      margin: 0;
      padding-left: 0;
      list-style: none;
      display: contents;
    }

    li {
      display: inline;
    }
  }

  .mic-breadcrumb-separator {
    color: map-get($primary, A400);
  }

  .mic-breadcrumb-link {
    a {
      border-block: 2px solid transparent;
      cursor: pointer;
      color: $textColor;

      &.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        color: unset;

        &:hover,
        &:focus {
          color: unset;
        }
      }

      .mat-icon {
        color: map-get($primary, A400);
        svg {
          width: 22px;
          height: 22px;
        }
      }

      &:hover,
      &:focus {
        color: map-get($primary, A400);
        border-block-end-color: map-get($primary, A400);
      }
    }

    &:last-of-type a {
      color: map-get($primary, A400);
      font-weight: bold;

      &:hover,
      &:focus {
        cursor: default;
        border-color: transparent;
      }
    }
  }

  .mic-breadcrumb-more {
    color: $white;
    background-color: map-get($primary, A400);
  }
}
