/*

In this file:

// A. Caret Mixin
// B. Caret Placeholder

*/

////////////////////////////////////////
// A. Caret Mixin
////////////////////////////////////////

// Used by %caret::after and .form-entry__field__select::before
// (pseudo-elements can't extend a placeholder's nested pseudo-element)

@mixin caret-shape {
    border-top: var(--_caret-size) solid;
    border-right: var(--_caret-size) solid transparent;
    border-bottom: 0;
    border-left: var(--_caret-size) solid transparent;

    display: inline-flex;

    color: inherit;

    pointer-events: none;
}

////////////////////////////////////////
// B. Caret Placeholder
////////////////////////////////////////

%caret {
    --_caret-size: 0.25em;

    display: inline-flex;
    align-items: center;

    &::after {
        position: relative;
        content: "";

        @include caret-shape;
    }
}