.spinner {
    display: inline-block;
    height: 2.4em;
    line-height: 2.2em;
    padding: 0 .6em;
    margin: 0 .2em;
    color: inherit;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border-bottom: 1px solid @color-light-gray;
    overflow: hidden;
    transition: box-shadow .3s ease;
    box-sizing: border-box;

    &:hover,
    &:focus {
        color: inherit;
    }

    &:hover {
        border-bottom-width: 2px;

        &.spinner-default {
            border-color: @base-default-color;
        }

        &.spinner-primary {
            border-color: @base-primary-color;
        }

        &.spinner-cobalt {
            border-color: @base-cobalt-color;
        }

        &.spinner-success {
            border-color: @base-success-color;
        }

        &.spinner-danger {
            border-color: @base-danger-color;
        }

        &.spinner-alert {
            border-color: @base-alert-color;
        }

        &.spinner-notice {
            border-color: @base-notice-color;
        }

        &.spinner-force {
            border-color: @base-force-color;
        }
    }

    &.spinner-block {
        display: block;
        width: 100%;
        margin: 0;
    }

    &.spinner-disabled,
    &.spinner-readonly {
        color: @font-light-color;
        background-color: rgba(0, 0, 0, .125);
        cursor: not-allowed;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .125) inset;

        &:hover {
            color: @font-extra-light-color;
            background-color: rgba(0, 0, 0, .15);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .15) inset;
        }

        &:focus {
            color: @font-light-color;
        }
    }

    .spinner-arrow,
    .spinner-txt {
        vertical-align: middle;
    }

    .spinner-arrow {
        font-size: 130%;
    }

    .spinner-txt {
        margin-right: 1.2em;
    }
}

.spinner-wrapper {
    max-height: 13em;
    padding: .4em 0;
    text-align: center;
    background-color: @base-white-color;
    border-radius: 2px;
    opacity: 0;
    border: 1px solid @color-dark-silver;
    overflow: hidden;
    overflow-y: auto;
    z-index: 100002;
    transition: opacity .1s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .375);

    &::-webkit-scrollbar {
        height: 3px;
        width: 3px;
        background: @color-white;
        border: none
    }

    &::-webkit-scrollbar-thumb {
        background-color: @color-gray;
    }

    &.anim-start {
        opacity: 1;
    }

    &.spinner-wrapper-default {
        &::-webkit-scrollbar-thumb {
            background-color: @base-default-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-default-color, 10%);
                color: @base-default-color;
            }

            &.spinner-selected {
                background-color: fade(@base-default-color, 10%);
                color: @base-default-color;
                font-weight: 600;
            }
        }
    }

    &.spinner-wrapper-primary {
        &::-webkit-scrollbar-thumb {
            background-color: @base-primary-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-primary-color, 10%);
                color: @base-primary-color;
            }

            &.spinner-selected {
                background-color: fade(@base-primary-color, 10%);
                color: @base-primary-color;
                font-weight: 600;
            }
        }
    }

    &.spinner-wrapper-cobalt {
        &::-webkit-scrollbar-thumb {
            background-color: @base-cobalt-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-cobalt-color, 10%);
                color: @base-cobalt-color;
            }

            &.spinner-selected {
                background-color: fade(@base-cobalt-color, 10%);
                color: @base-cobalt-color;
            }
        }
    }

    &.spinner-wrapper-success {
        &::-webkit-scrollbar-thumb {
            background-color: @base-success-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-success-color, 10%);
                color: @base-success-color;
            }

            &.spinner-selected {
                background-color: fade(@base-success-color, 10%);
                color: @base-success-color;
            }
        }
    }

    &.spinner-wrapper-danger {
        &::-webkit-scrollbar-thumb {
            background-color: @base-danger-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-danger-color, 10%);
                color: @base-danger-color;
            }

            &.spinner-selected {
                background-color: fade(@base-danger-color, 10%);
                color: @base-danger-color;
            }
        }
    }

    &.spinner-wrapper-alert {
        &::-webkit-scrollbar-thumb {
            background-color: @base-alert-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-alert-color, 10%);
                color: @base-alert-color;
            }

            &.spinner-selected {
                background-color: fade(@base-alert-color, 10%);
                color: @base-alert-color;
            }
        }
    }

    &.spinner-wrapper-notice {
        &::-webkit-scrollbar-thumb {
            background-color: @base-notice-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-notice-color, 10%);
                color: @base-notice-color;
            }

            &.spinner-selected {
                background-color: fade(@base-notice-color, 10%);
                color: @base-notice-color;
            }
        }
    }

    &.spinner-wrapper-force {
        &::-webkit-scrollbar-thumb {
            background-color: @base-force-color;
        }

        .spinner-option {
            &:hover {
                background-color: fade(@base-force-color, 10%);
                color: @base-force-color;
            }

            &.spinner-selected {
                background-color: fade(@base-force-color, 10%);
                color: @base-force-color;
            }
        }
    }

    .spinner-option {
        display: block;
        min-width: 4em;
        padding: .8em 1.6em;
        color: @font-normal-color;
        white-space: nowrap;
        text-align: left;
        transition: background-color .2s ease, color .2s ease;

        &:hover {
            background-color: @color-dark-silver;
            color: @font-default-color;
        }

        &.spinner-selected {
            background-color: @color-dark-silver;
            color: @font-default-color;
            font-weight: 600;
        }

        i,
        span {
            vertical-align: middle;
        }

        i {
            width: 1.2em;
            margin-right: .6em;
            font-size: 100%;
            text-align: left;
        }
    }
}