@mixin dropdown-list-item {
    display: flex;
    padding: 5px;

    > span {
        display: inline-block;
        padding: 0;
    }

    > span.dropdown-list-item-content {
        flex: 1;

        > span.dropdown-list-item-highlighted {
            background-color: $highlight-background-color;
            color: $highlight-text-color;
            text-decoration: $highlight-text-decoration;
        }
    }

    > span.dropdown-list-item-tag {
        align-self: center;
        background-color: rgba(125, 125, 125, .5);
        border-radius: 5px;
        font-size: .75rem;
        font-weight: 700;
        line-height: 1.4rem;
        margin: 0 2px;
        padding: 0 4px;
    }

    > span.dropdown-list-item-expand-toggle {
        cursor: pointer;
        margin-left: 10px;
        margin-right: 5px;
        min-width: 30px;
        transition: background-color .25s;

        &.dropdown-list-item-expand-toggle-open {
            background-image: $dropdown-list-item-toggle-open-background-image;
            background-position: center;
            background-repeat: no-repeat;
            background-size: $dropdown-list-item-toggle-open-background-size;

            &:hover {
                background-color: $dropdown-list-item-toggle-background-hover-color;
                border-radius: $dropdown-list-item-border-radius;
            }
        }

        &.dropdown-list-item-expand-toggle-closed {
            background-image: $dropdown-list-item-toggle-closed-background-image;
            background-position: center;
            background-repeat: no-repeat;
            background-size: $dropdown-list-item-toggle-closed-background-size;

            &:hover {
                background-color: $dropdown-list-item-toggle-background-hover-color;
                border-radius: $dropdown-list-item-border-radius;
            }
        }
    }

    &.dropdown-list-item-preselected > span.dropdown-list-item-content {
        background: $dropdown-list-item-hover-background-color;
        border-radius: 0 $dropdown-list-item-border-radius $dropdown-list-item-border-radius 0;
        color: $dropdown-list-item-hover-text-color;
        position: relative;
    }

    &.dropdown-list-item-selectable > span.dropdown-list-item-content:hover {
        background-color: $dropdown-list-item-hover-background-color;
        border-radius: 0 $dropdown-list-item-border-radius $dropdown-list-item-border-radius 0;
        color: $dropdown-list-item-hover-text-color;
        cursor: pointer;
        position: relative;
    }

    &.dropdown-list-item-preselected > span.dropdown-list-item-content,
    &.dropdown-list-item-selectable > span.dropdown-list-item-content:hover {
        &::before {
            background: $dropdown-list-item-hover-background-color;
            border-radius: $dropdown-list-item-border-radius 0 0 $dropdown-list-item-border-radius;
            content: '';
            height: 100%;
            position: absolute;
            right: 100%;
            top: 0;
            width: 5px;
        }
    }

    &.dropdown-list-item-selected > span.dropdown-list-item-content {
        background-color: $dropdown-list-item-selected-background-color;
        border-radius: 0 $dropdown-list-item-border-radius $dropdown-list-item-border-radius 0;
        color: $dropdown-list-item-selected-text-color;
        position: relative;

        &:hover {
            color: $white-opaque-30;
        }

        &::before {
            background: $dropdown-list-item-selected-background-color;
            border-radius: $dropdown-list-item-border-radius 0 0 $dropdown-list-item-border-radius;
            content: '';
            height: 100%;
            position: absolute;
            right: 100%;
            top: 0;
            width: 5px;
        }
    }

    &.temporarily-highlighted > span.dropdown-list-item-content {
        position: relative;

        &::after {
            animation: temporarily-highlighted 750ms forwards;
            background-color: transparent;
            border: 10px solid lighten($dropdown-list-item-selected-background-color, 30%);
            border-radius: $dropdown-list-item-border-radius;
            box-sizing: border-box;
            content: '';
            height: calc(100% + 10px);
            left: -10px;
            opacity: 1;
            position: absolute;
            top: -5px;
            width: calc(100% + 15px);

            @keyframes temporarily-highlighted {
                0% {
                    opacity: 0;
                }

                50% {
                    opacity: 1;
                }

                100% {
                    border: 0 solid $dropdown-list-item-selected-background-color;
                    opacity: 0;
                }
            }
        }
    }

    &.dropdown-list-item-hidden {
        display: none;
        height: 0;
        overflow: hidden;
    }
}