@mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; } @mixin caret-up { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; } @mixin caret-end { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @mixin caret-start { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; } @mixin caret($direction: down) { @if $enable-caret { &::after { display: inline-block; margin-left: $caret-spacing; vertical-align: $caret-vertical-align; content: ''; @if $direction == down { @include caret-down(); } @else if $direction == up { @include caret-up(); } @else if $direction == end { @include caret-end(); } } @if $direction == start { &::after { display: none; } &::before { display: inline-block; margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ''; @include caret-start(); } } &:empty::after { margin-left: 0; } } }