@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$image-selector-list-component-width: 88px !default;
$image-selector-list-component-height: 58px !default;
$image-selector-list-component-width-large: 161px !default;
$image-selector-list-component-height-large: 108px !default;

    .c-image-selector-list-component__list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0;
    }

    .c-image-selector-list-component__option {
        box-sizing: border-box;
        font-size: 1rem;
        display: inline-block;
        width: 88px;
        height: 58px;
        background-color: #999;
        margin: 0 7px 7px 0;
        border: solid 3px transparent;
        cursor: pointer;
        vertical-align: middle;
        background-size: cover;
        background-repeat: no-repeat;
        background-origin: border-box;
        background-clip: border-box;
        &:not(.c-image-selector-list-component__option--selected) {
            &:hover {
                border-color: transparentize($color: $black-color, $amount: 0.4);
            }
        }
        &:last-child {
            margin-right: 0;
        }
    }

        .c-image-selector-list-component__option--selected {
            position: relative;
            border-color: $accent-a;
            cursor: default;
            box-shadow: 0px 0px 0px 1px $accent-a;

            &:after {
                content: '';
                @include fill-parent();
                @if type-of($accent-a) == color {
                    box-shadow: 0 0 4px 5px transparentize($color: $accent-a, $amount: 0.5);
                }
            }
        }

        .c-image-selector-list-component__option--large {
            width: $image-selector-list-component-width-large;
            height: $image-selector-list-component-height-large;
            margin-right: 16px;
            margin-bottom: 16px;
        }