Link Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-link-grid{
    
    &.no-wrapper{
        padding: 3em 0;
        @include bp($lg){
            padding: 6em 0;
        }
    }
    &__container{
        background-color: $primary;
        padding: 3em 0;
        border-top-left-radius: 40px;
        color: $white;
        .overline,
        .heading,
        .content-col{
            color: $white;
        }

        @include bp($lg){
            border-top-left-radius: 120px;
            padding: 6.875em 0;
        }
        
    }

    .heading{
        font-size: rem-calc(24);
        line-height: rem-calc(32);
        letter-spacing: 0.02em;
        font-weight: 400;        

        @include bp($lg){
            font-size: rem-calc(40);
            line-height: rem-calc(48);
        }
    }
    .heading-col{
        margin-bottom: rem-calc(24);

        @include bp($lg){
            margin-bottom: rem-calc(68);
        }
    }

    &-wrap{
        border-bottom: 1px solid $grey-secondary;
        padding-bottom: rem-calc(16);
        margin-bottom: rem-calc(16);

        @include bp($lg){
            padding-bottom: rem-calc(32);
            margin-bottom: rem-calc(32);
        }
    }

    &-link{
        color: $primary;
        position: relative;
        font-weight: 400;
        font-size: rem-calc(20);
        line-height: rem-calc(24);
        transition: 0.3s ease all;
        text-decoration: none;
        display: flex;
        align-items: center;

        @include bp($lg){            
            font-size: rem-calc(24);
            line-height: rem-calc(48);
        }

        &::before{
            content: "";
            width: rem-calc(40);
            height: rem-calc(40);
            display: inline-block;
            border-radius: rem-calc(40);
            border: 1px solid $orange;
            background-color: transparent;
            background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.333008 6.80957H13.2038' stroke='%230D0D0D'/%3E%3Cpath d='M7.48145 1.01758L13.2065 6.80911L7.48145 12.6013' stroke='%230D0D0D'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-position: center;
            transition: 0.3s ease all;
            margin-right: rem-calc(24);

            @include bp($lg){
                width: rem-calc(48);
                height: rem-calc(48);
                border-radius: rem-calc(48);
                background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.77173H15.4449' stroke='%230D0D0D'/%3E%3Cpath d='M8.57812 0.821045L15.4482 7.77088L8.57812 14.7215' stroke='%230D0D0D'/%3E%3C/svg%3E%0A");
            }
        }
    
        &:hover,
        &:focus {
            font-weight: 600;
            color: $black;
            &::before{
                background-color: $orange;
            }
        }
        &:active{
            &::before{
                background-color: $orange-light;
            }
        }
    }

    &.bg--primary,
    &.has-black-wrapper{
        color: $white;
        .overline,
        .heading,
        .content-col{
            color: $white;
        }
        .block-link-grid-link{
            color: $white;
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.333008 6.80957H13.2038' stroke='white'/%3E%3Cpath d='M7.48145 1.01758L13.2065 6.80911L7.48145 12.6013' stroke='white'/%3E%3C/svg%3E%0A");
                @include bp($lg){
                    background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.77173H15.4449' stroke='white'/%3E%3Cpath d='M8.57812 0.821045L15.4482 7.77088L8.57812 14.7215' stroke='white'/%3E%3C/svg%3E%0A");
                }
            }
            &:hover,
            &:focus {
                font-weight: 600;
                color: $white;
                &::before{
                        background-color: $orange;
                        background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.333008 6.80957H13.2038' stroke='white'/%3E%3Cpath d='M7.48145 1.01758L13.2065 6.80911L7.48145 12.6013' stroke='white'/%3E%3C/svg%3E%0A");
                        @include bp($lg){
                            background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.77173H15.4449' stroke='white'/%3E%3Cpath d='M8.57812 0.821045L15.4482 7.77088L8.57812 14.7215' stroke='white'/%3E%3C/svg%3E%0A");
                        }
                    }
                }
                &:active{
                    &::before{
                        background-color: $orange-light;
                    }
                }
        }
    }
}

.cl-modal-box{
    width: 90%;
    max-width: 876px;
    padding: rem-calc(54 20 32 24);
    height: 80vh !important;    
    border-radius: 20px;
    position: relative;
    @include bp($lg){
        padding: rem-calc(64 54 60);
        border-radius: 32px;
    }
    .cl-modal-close{
        position: absolute;
        top: 16px;
        right: 16px;
        background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='25.5' stroke='black'/%3E%3Crect x='18.0664' y='33.0073' width='21.2234' height='0.721152' transform='rotate(-45 18.0664 33.0073)' fill='black'/%3E%3Crect width='21.2234' height='0.721152' transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 33.9336 33.0073)' fill='black'/%3E%3C/svg%3E%0A");
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border-radius: 100%;
        border: none;
        width: 30px;
        height: 30px;
        @include bp($md){
            width: 52px;
            height: 52px;
        }
        &:hover{
            background-color: $orange;
        }
    }
    .cl-modal-wrap{
        height: 100%;
        overflow-y: auto;
        padding-right: 4px;
        &::-webkit-scrollbar {
            width: 4px;                    
        }
        
        /* Track */
        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        /* Handle */
        &::-webkit-scrollbar-thumb {
            background: #888;
        }
        
        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    }
    .cl-modal-heading{
        font-size: rem-calc(20);
        line-height: rem-calc(32);
        letter-spacing: 0.02em;
        font-weight: 400;
        margin-bottom: rem-calc(24);

        @include bp($lg){
            font-size: rem-calc(40);
            line-height: rem-calc(48);
            margin-bottom: rem-calc(40);
        }
    }
}