.storefront__picker {

    // General
    &--wrapper {
        margin: 0;
    }

    // Logo list
    &-logo-list {
        display: flex;
        align-items: center;
    }

    // Logo
    &-logo-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 56px;
        height: 36px;
        z-index: 1;

        &:hover,
        &:focus,
        &&--active {
            text-decoration: none;
            opacity: 1;
        }

        &:not(&--dropdown-toggle) {
            display: none;

            @media (min-width: 768px) {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }
        }
    }

    &-logo-link:hover &-logo-wrapper:not(&-logo-wrapper--active),
    &-logo-link:focus &-logo-wrapper:not(&-logo-wrapper--active) {
        border-color: #ccc;
    }

    &-logo-link:hover &-logo-wrapper,
    &-logo-link:focus &-logo-wrapper {
        background-color: #f5f6f7;
    }

    &-logo-link:hover &-logo-wrapper:before,
    &-logo-link:focus &-logo-wrapper:before {
	    -webkit-box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0);
        box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0);
    }

    &-logo-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: relative;
        border: 2px solid #fff;
        border-radius: 5px;
        background-color: #fff;
        overflow: hidden;
        
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0.2);
            box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0.2);
            -webkit-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
            z-index: 1;
        }

        &--mobile {

            @media (min-width: 768px) {
                display: none;
            }
        }
        &--desktop {
            display: none;

            @media (min-width: 768px) {
                display: flex;
            }
        }

        &--active {
            border-color: @mainColor;
            
            &:before {
                -webkit-box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0);
                box-shadow: inset 0 0 0 1.25px rgba(29, 72, 110, 0);
            }
        }
    }

    &-logo-img {
        height: 100%;
        max-height: 100%;
        width: auto;
        max-width: none;
        -webkit-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms;
        
        &--inactive {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            opacity: 0.5;
        }
    }

    &-logo-img--active,
    &-logo-link:hover &-logo-img--inactive,
    &-logo-link:focus &-logo-img--inactive {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        opacity: 1;
    }

    &-logo-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: @mainColor;
        font-weight: bold;
        white-space: nowrap;

        &--small {
            font-size: 10px;
        }

        &--active {
            color: @grayLight;
        }
    }

    // Dropdown
    &-dropdown {
        
        &--threshold {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        @media (min-width: 768px) {
            display: none;

            &--threshold {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-right: 5px;
            }
        }
    }

    &-dropdown-menu {
        padding: 0;
        left: ~"calc(56px / 2)";
        min-width: 286px;   // 320px - 2 * 17px padding
        border: 0;

        &:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: -7px;
            left: 100%;
            left: ~"calc(100% - 28px + 4px)";   // 100% - Storefront picker button / 2 + padding

            @media (min-width: 768px) {
                left: 50%;
                left: ~"calc(50% - 7px)";
            }
        }

        &:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
            position: absolute;
            top: -6px;
            left: 100%;
            left: ~"calc(100% - 28px + 5px)";   // 100% - Storefront picker button / 2 + padding

            @media (min-width: 768px) {
                left: 50%;
                left: ~"calc(50% - 6px)";
            }
        }

        .dropdown.open .dropdown-menu& {
            top: 100%;
        }

        @media (min-width: 768px) {
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
        }
    }

    &-dropdown.open &-logo-text {
        color: @grayLight;
        background-color: @btnBackgroundHighlight;
    }

    // Select2 dropdown overflow fix
    .select2-container--default &-dropdown-picker .select2-results>.select2-results__options {
         max-height: ~"calc(100vh - 130px)";    // 100vh - Mobile heading

        @media (min-width: 768px) {
            max-height: ~"calc(100vh - 208px)"; // 100vh - Desktop heading
        }
    }
}
