@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import '../../../node_modules/bulma/sass/utilities/mixins.sass';


.purdue-home-button-bar{
    ul, div {
        list-style: none !important;
        margin:0 !important;
        padding:0 !important;
    }
    &.has-black-background{
        background:$black;
        .purdue-home-button-bar__button-title, .purdue-home-button-bar__button-content{
            color:$white;
        }
        .purdue-home-button-bar__button:after{
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='104.253572px' height='104.253572px' viewBox='0 0 104.253572 104.253572' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Earrow_circle_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='arrow_circle_icon' transform='translate(52.1268, 52.1268) rotate(40) translate(-52.1268, -52.1268)translate(15.1268, 15.1268)' stroke='%23cfb991' stroke-width='4'%3E%3Cg id='Group-3' transform='translate(0, 0)'%3E%3Ccircle id='Oval-Copy' transform='translate(37, 37) rotate(135) translate(-37, -37)' cx='36.9999977' cy='36.9999977' r='25.1629493'%3E%3C/circle%3E%3Cg id='Arrow-Copy-3' transform='translate(27.7199, 21.7701)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9.52771771' y1='2.99227577' x2='9.56560625' y2='27.0777404' id='Path-6' transform='translate(9.5467, 15.035) rotate(50) translate(-9.5467, -15.035)'%3E%3C/line%3E%3Cpolyline id='Path-5' transform='translate(14.2315, 11.1834) rotate(50) translate(-14.2315, -11.1834)' points='4.73086087 17.2295253 14.1515077 5.10747085 23.7320575 17.2593992'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
           }
        }
    &.has-gold-background{
        background:$boiler-gold;
        ul, div{
            li:not(:last-child){
                border-color:$aged-gold;
            }
        }
    }
    &.has-gray-background{
        background:$steam-gray;
        ul, div{
            li:not(:last-child){
                border-color:$cool-gray;
            }
        }
    }
    ul, div {
        display:flex;
        list-style-type: none;
        padding:0;
        margin:0;
        @include touch{
            display:block;
        }
        li, div{
            padding:0;
            flex:1 1 0;
            width:0;
            &:not(:last-child){
                border-right: 2px solid $boiler-gold;
            }
            @include touch{
                width:100%;
                &:not(:last-child){
                    border-right: none;
                    border-bottom: 2px solid $boiler-gold;
                }
            }
        }
    }
    &__button{
        display:block;
        padding:2.5rem 5rem 5rem 1.75rem;
        height:100%;
        width: 100%;
        position:relative;
        text-decoration: none;
        &:after{
            content:"";
            position:absolute;
            right:0;
            bottom:0;
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='104.253572px' height='104.253572px' viewBox='0 0 104.253572 104.253572' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Earrow_circle_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='arrow_circle_icon' transform='translate(52.1268, 52.1268) rotate(40) translate(-52.1268, -52.1268)translate(15.1268, 15.1268)' stroke='%23000000' stroke-width='4'%3E%3Cg id='Group-3' transform='translate(0, 0)'%3E%3Ccircle id='Oval-Copy' transform='translate(37, 37) rotate(135) translate(-37, -37)' cx='36.9999977' cy='36.9999977' r='25.1629493'%3E%3C/circle%3E%3Cg id='Arrow-Copy-3' transform='translate(27.7199, 21.7701)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9.52771771' y1='2.99227577' x2='9.56560625' y2='27.0777404' id='Path-6' transform='translate(9.5467, 15.035) rotate(50) translate(-9.5467, -15.035)'%3E%3C/line%3E%3Cpolyline id='Path-5' transform='translate(14.2315, 11.1834) rotate(50) translate(-14.2315, -11.1834)' points='4.73086087 17.2295253 14.1515077 5.10747085 23.7320575 17.2593992'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 
            height:80px;
            width:80px;
            background-repeat: no-repeat;
            background-size:cover;
            transition: 0.3s ease;
        }
        &:hover{
            &:after{
                transform: translateX(3px);
            }
        }
        @include touch{
            padding:1.875rem 6rem 1.875rem 1.875rem;
            height:auto;
            &:after{
                right:0;
                top:calc(50% - 40px);
            }
        }
    }
    &__button-title{
        font-family: $acumin-pro;
        font-size: max(1.7vw, 18px);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.25; 
        color:$black;   
        @include touch{
            font-size: 1.875rem;
        }
    }
    &__button-content{
        font-family: $acumin-pro;
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.5;   
        color:$black; 
    }
} 

.purdue-home-buttons {
    .purdue-home-button-list{
        padding-left:0;
        li {
            &::marker {
                content: none;
            }
        }
    }
    &.purdue-home-buttons--left{
        .purdue-home-button-list {
            justify-content: left;
        }
    }
}

.post-content__body{
    .purdue-home-buttons{
        .purdue-home-button-list{
            padding-left:0;
        }
        &.purdue-home-buttons--left{
            .purdue-home-button-list {
                justify-content: left;
            }
        }
    }
}