/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />

//
// Choice Styles (Variants etc.)
// ------------------------------------------------------

.choice {
    margin-bottom: 1rem;
}

.col-form-label.required,
.choice-label.required {
	color: inherit;
	font-weight: bold;
	&:after { content: ' *' }
}

.choice-item-img,
.choice-item-color {
    display: inline-block;
    text-decoration: none !important;
    margin-right: 0.25rem;
    overflow: hidden;
}

.choice-item-img {
    max-width: 20px;
    max-height: 1em;

    > img {
        max-width: 100%;
        height: auto;
    }
}

.choice-item-color {
    width: 1em;
    height: 1em;
    padding: 0;
}

.choice-description {
    color: $text-muted;
    font-size: $font-size-sm;
    margin-bottom: 0.5rem;
    > *:first-child { margin-top: 0; }
    > *:last-child { margin-bottom: 0; }
}

.choice-box-group {
    $choice-box-padding:        0.2rem;
    $choice-box-size:           2.8rem;
    $choice-box-size-lg:        4rem;
    $choice-box-size-sm:        2.3rem;
    $choice-box-size-xl:        6rem;

	margin: 0;
	padding: 0;
	list-style-type: none;
    position: relative;
    margin: 0 ($choice-box-padding * -1);

    @include clearfix();

	.choice-box {
        position: relative;
        float: left;
        display: block;
        padding: $choice-box-padding;
	}

    .choice-box-label {
        margin: 0;
    }

	.choice-box-content {
        position: relative;
		display: block;
        cursor: pointer;

        &:after {
            box-sizing: content-box;
            position: absolute;
            display: block;
            right: -6px;
            top: -6px;
            background-color: $warning;
            border-radius: 50%;
            border: 1px solid #fff;

            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            vertical-align: middle;

            font-family: FontAwesome;
            content: "\f00c"; // check
            color: #fff;
            font-size: 10px;

            opacity: 0;
            transform: scale(0);
            transition: all 0.1s ease-in;
        }
	}

	.choice-box-element {
        display: inline-block;
        border: 1px solid rgba(0,0,0, .3);
        background-color: #fff;
        transition: border-color 0.1s linear;

        height: $choice-box-size;
        line-height: $choice-box-size;
        min-width: $choice-box-size;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        font-weight: $font-weight-medium;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;

        &:hover { border-color: rgba(0,0,0, 0.7); }

        .choice-box-text {
            padding: 0 0.4rem;
        }
	}

	.choice-box-control-native:checked + .choice-box-content {
        .choice-box-element {
            border-color: rgba(0,0,0, 0.7);
            outline: 1px solid rgba(0,0,0, 0.7);
        }

        &:after {
            opacity: 1;
            transform: scale(1);
        }
	}

	.choice-box-control-native {
		display: none !important;
	}

    // Choice box sizing
    &.choice-box-group-xl .choice-box-element {
        height: $choice-box-size-xl;
        line-height: $choice-box-size-xl;
        min-width: $choice-box-size-xl;     
    }

    &.choice-box-group-lg .choice-box-element {
        height: $choice-box-size-lg;
        line-height: $choice-box-size-lg;
        min-width: $choice-box-size-lg;       
    }

    &.choice-box-group-sm .choice-box-element {
        height: $choice-box-size-sm;
        line-height: $choice-box-size-sm;
        min-width: $choice-box-size-sm;       
    }
}