.cus-btn{
    padding: 10.5px 66px;
    position: relative;
    background: transparent;
    font-weight: 700;
    font-size: 21px;
    line-height: 130%;
    overflow: hidden;
    transition: all 0.5s ease-in;
    @include media-query(492px) {
        padding: 10.5px 40px;
        font-size: 18px;
    }
    
    &::before {
        content: "";
        left: 12px;
        top: 0;
        position: absolute;
        height: 48px;
        transform: skewX(-25deg);
        width: 0%;
        transition: all 0.5s ease-in;
    }
    &::after {
        content: "";
        right: 12px;
        top: 0;
        position: absolute;
        height: 48px;
        transform: skewX(-25deg);
        width: 0%;
        transition: all 0.5s ease-in;
    }

    &.btn-light{
        color: $white-1;
        &:hover{
            color: $accent-1;
        }
        &::before {
            border-left: 2px solid $white-1;
        }
        &::after {
            border-right: 2px solid $white-1;
        }
    }
    &.btn-dark{
        color: $black-1;
        &:hover{
            color: $accent-1;
        }
        &::before {
            border-left: 2px solid $black-1;
        }
        &::after {
            border-right: 2px solid $black-1;
        }
    }
    &:hover::before{
        border-color: $accent-1;
        border-style: solid;
        border-width: 0 0 2px 2px;
        width: 75%;
        transition: all 0.5s ease-in;
    }
    &:hover::after{
        border-color: $accent-1;
        border-style: solid;
        border-width: 2px 2px 0 0;
        width: 75%;
        transition: all 0.5s ease-in;
    }
}
.dark{
    .cus-btn{
        
        &.btn-light{
            color: $black-1;
            &:hover{
                color: $accent-1;
            }
            &::before {
                border-color: $black-1;
            }
            &::after {
                border-color: $black-1;
            }
           
        }
        &.btn-dark{
            color: $gray-2;
            &:hover{
                color: $accent-1;
            }
            &::before {
                border-color: $gray-2;
            }
            &::after {
                border-color: $gray-2;
            }
            
        }
        &:hover::before{
            border-color: $accent-1;
            
        }
        &:hover::after{
            border-color: $accent-1;
            
        }

    }
}