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

.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