@import '../../less/styles';
@import '../../less/palette';
@import '../../less/mixins';
@import '../../less/palette-brand-@{theme}';

.multi-select {
    @option-default-height: 40px;
    @default-width: 160px;

    display: inline-block;
    width: @default-width;

    .option {
        @checkbox-length: 14px;
        @checkbox-margin: 12px;

        @checkmark-width: 8px;
        @checkmark-height: 6px;

        .group-border-radius(3px);
        .standard-transition(background-color);
        cursor: pointer;
        outline: none;
        position: relative;
        width: inherit;
        height: @option-default-height;
        line-height: @option-default-height;
        padding: 1px 12px 0 40px;
        border: 1px solid @color-border;
        margin-bottom: -1px;

        &.hover,
        &:hover {
            background: @color-illegal-white;
        }

        &.selected {
            &:after {
                border-color: @color-brand;
                background-color: @color-brand;
            }

            &:before {
                content: '';
                position: absolute;
                width: @checkmark-width;
                height: @checkmark-height;
                left: @checkbox-margin + (@checkbox-length - @checkmark-width) / 2;
                top: @checkbox-margin + (@checkbox-length - @checkmark-height) / 2;

                background-image: url('./img/check.svg');
                background-position: center;
                background-repeat: no-repeat;

                z-index: 5;
            }
        }


        &:after {
            .standard-transition(background-color);
            content: '';
            position: absolute;
            box-sizing: border-box;
            left: @checkbox-margin;
            top: @checkbox-margin;
            width: @checkbox-length;
            height: @checkbox-length;
            border: 1px solid @color-border;
            border-radius: 2px;
        }
    }

    /* pre-load image */
    &:after {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        content: url('./img/check.svg');
    }
}
