/**
 * Dropdown Item
 */

.dropdown .dropdown-item {
    display: flex;
    margin: var(
        --dropdown--item--margin,
        (
            var(--dropdown--item--margin-top, 0)
                var(
                    --dropdown--item--margin-right,
                    var(--dropdown--body--padding-right, calc(var(--dropdown--padding-right) * -1))
                )
                var(--dropdown--item--margin-bottom, 0)
                var(
                    --dropdown--item--margin-left,
                    var(--dropdown--body--padding-left, calc(var(--dropdown--padding-left) * -1))
                )
        )
    );
    text-align: inherit; // For `<button>`s
    white-space: nowrap; // prevent links from randomly breaking onto new lines
    cursor: pointer;
    transition-property: var(
        --dropdown--item--transition-property,
        (background-color, border-color, color)
    );
    transition-timing-function: var(
        --dropdown--item--transition-timing-function,
        var(--transition-timing-function)
    );
    transition-duration: var(--dropdown--item--transition-duration, var(--transition-duration));
    color: var(--dropdown--item--color, var(--dropdown--color));
    border-style: var(
        --dropdown--item--border-style,
        var(
            --dropdown--border-style,
            (
                var(
                        --dropdown--item--border-top-style,
                        var(--dropdown--border-top-style, var(--border-top-style))
                    )
                    var(
                        --dropdown--item--border-right-style,
                        var(--dropdown--border-right-style, var(--border-right-style))
                    )
                    var(
                        --dropdown--item--border-bottom-style,
                        var(--dropdown--border-bottom-style, var(--border-bottom-style))
                    )
                    var(
                        --dropdown--item--border-left-style,
                        var(--dropdown--border-left-style, var(--border-left-style))
                    )
            )
        )
    );
    border-width: var(
        --dropdown--item--border-width,
        (
            var(--dropdown--item--border-top-width, 0) var(--dropdown--item--border-right-width, 0)
                var(--dropdown--item--border-bottom-width, 0)
                var(--dropdown--item--border-left-width, 0)
        )
    );
    border-color: var(
        --dropdown--item--border-color,
        var(
            --dropdown--border-color,
            (
                var(
                        --dropdown--item--border-top-color,
                        var(--dropdown--border-top-color, var(--border-top-color))
                    )
                    var(
                        --dropdown--item--border-right-color,
                        var(--dropdown--border-right-color, var(--border-right-color))
                    )
                    var(
                        --dropdown--item--border-bottom-color,
                        var(--dropdown--border-bottom-color, var(--border-bottom-color))
                    )
                    var(
                        --dropdown--item--border-left-color,
                        var(--dropdown--border-left-color, var(--border-left-color))
                    )
            )
        )
    );
    padding: var(
        --dropdown--item--padding,
        var(
            --dropdown--padding,
            (
                var(
                        --dropdown--item--padding-top,
                        calc(var(--dropdown--padding-top, var(--padding-top)) * 0.5)
                    )
                    var(
                        --dropdown--item--padding-right,
                        var(--dropdown--padding-right, var(--padding-right))
                    )
                    var(
                        --dropdown--item--padding-bottom,
                        calc(var(--dropdown--padding-bottom, var(--padding-bottom)) * 0.5)
                    )
                    var(
                        --dropdown--item--padding-left,
                        var(--dropdown--padding-left, var(--padding-left))
                    )
            )
        )
    );
    background: var(--dropdown--item--background, var(--dropdown--background, transparent));

    &:not(.-disabled, .-plaintext) {
        &:hover,
        &:focus {
            color: var(--dropdown--item--hover--color, var(--dropdown--item--color));
            background: var(--dropdown--item--hover--background, var(--dropdown--item--background));
        }
    }

    &.-disabled {
        color: var(--dropdown--item--disabled--color, var(--dropdown--item--color));
        background: var(--dropdown--item--disabled--background, var(--dropdown--item--background));
        pointer-events: none;
        cursor: default;
    }

    &.-active {
        color: var(--dropdown--item--active--color, var(--dropdown--item--color));
        background: var(--dropdown--item--active--background, var(--dropdown--item--background));
        font-weight: var(--dropdown--item--active--font-weight, var(--font-weight-semibold));
    }

    &:hover,
    &:focus {
        outline: 0;
        text-decoration: none;
    }

    &.-plaintext {
        cursor: default;
    }
}