@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-breadcrumbs
    display: flex
    align-items: center
    line-height: $breadcrumbs-line-height
    padding: $breadcrumbs-padding-y $breadcrumbs-padding-x

    &--rounded
      @include tools.rounded($breadcrumbs-rounded-border-radius)

    @at-root
      @include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier)
        padding-top: #{$breadcrumbs-padding-y + $modifier}
        padding-bottom: #{$breadcrumbs-padding-y + $modifier}

  .v-breadcrumbs__prepend
    align-items: center
    display: inline-flex

  .v-breadcrumbs-item
    align-items: center
    color: inherit
    display: inline-flex
    padding: $breadcrumbs-item-padding
    text-decoration: none
    vertical-align: $breadcrumbs-vertical-align

    &--disabled
      opacity: $breadcrumbs-item-disabled-opacity
      pointer-events: none

    &--link
      color: inherit
      text-decoration: none

    &--link:hover
      text-decoration: $breadcrumbs-item-link-text-decoration

    .v-icon
      font-size: $breadcrumbs-item-icon-font-size
      margin-inline: $breadcrumbs-item-icon-margin-inline-start $breadcrumbs-item-icon-margin-inline-end

  .v-breadcrumbs-divider
    display: inline-block
    padding: $breadcrumbs-divider-padding
    vertical-align: $breadcrumbs-vertical-align