@import './variables.scss';

body, html {
    margin: 0;
    padding: 0;
}

.faceted-search * {
    box-sizing: border-box;
    max-width: 100%;
}

.faceted-search__container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

.faceted-search__loader {
    width: 80px;
    height: 80px;

    position: relative;

    margin: 30% auto;

    & > i:nth-child(1){
        position: absolute;

        top: 20px;
        left: 5px;
        z-index: 100;

        &:before {
            font-size: 45px;
            color: $colorBrandLight;
        }
    }
    
    & > i:nth-child(2){
        position: absolute;
        top: 10px;
        left: 33px;
        z-index: 90;

        &:before {
            font-size: 30px;
            color: $colorBrand;
        }
    }

    & > i:nth-child(3){
        position: absolute;
        top: 30px;
        left: 35px;
        z-index: 80;

        &:before {
            font-size: 40px;
            color: $colorBrand;
        }
    }

    .faceted-search__loader-text {
        position: absolute;
        top: 70px;
        text-align: center;

        width: 80px;
        font-family: $font;
        font-size: $fontSizeXS;
        font-weight: $fontBold;
        letter-spacing: 0.5px;
    }
}

.faceted-search__error {
    width: 100px;
    margin: 30% auto;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    color: $colorRed;
    
    & > i {
        width: 100%;
        text-align: center;
        
        &:before {
            font-size: 40px;
        }
    }

    .faceted-search__error-text {
        margin-top: 10px;
        padding: 0;
        font-family: $font;
        font-size: $fontSizeS;
    }
    
}

.faceted-search__tabs {
    width: 100%;
}