#top{
    --buttonColor: #{$black};
    --buttonSize: 18px;
    --buttonInnerGap: 12px 16px;
    --buttonRadius: 30px;

}

#top div .avia-button,
#top .button,
.wp-block-button a{
    
    font-size: var(--buttonSize);
    padding: var(--buttonInnerGap);
    color: $white;
    border: none;
    font-family: $heading-font-family;
    font-weight: $medium;
    width: fit-content;
    background-color: $secondary-color;
    display: flex;
    align-items: center;
    border-radius: var(--buttonRadius) ;

    .avia_iconbox_title{
        line-height: 1.1;
        letter-spacing: 0px;
        height: fit-content;
        display: block;
    }


    &::before {
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }


    &:hover{
        background-color: $secondary-color-hover ;
    }


}

#top div .avia-button-wrap{
    &.calendar  a::before{
        content: "";
        background: url("/wp-content/uploads/2025/08/calendar-icon.svg") no-repeat center / contain;
    }

    &.briefcase  a::before{
        content: "";
        background: url("/wp-content/uploads/2025/08/briefcase-outline.svg") no-repeat center / contain;
    }

    &.search  a::before{
        content: "";
        background: url("/wp-content/uploads/2025/08/search.svg") no-repeat center / contain;
    }

    &.wsp  a::before{
        content: "";
        background: url("/wp-content/uploads/2025/08/whatsapp-icon.svg") no-repeat center / contain;
    }
    
    &.button--text a {
        background-color: transparent;
        padding: 0px;
        font-family: $heading-font-family;
        font-weight: $semibold;
        font-size: 16px;
        color: $primary-color;
        border: 1px solid transparent;
        padding: 10px 18px;
        transition: all 0.3s ease-in-out;

        .avia_iconbox_title {
            padding-top: 2px;
            margin-right: 10px;
        }

        &::after {
            content: "";
            width: 20px;
            height: 20px;
            background: url("/wp-content/uploads/2025/08/arrow-forward.png") no-repeat center / contain;
        }
        &:hover {
            border-color: $primary-color;
        }

    }
}


#top div .avia-button-center.avia-button-wrap {
    a {
        margin: 0 auto;
    }
}

#top div .avia-button{
    &.avia-size-small{
        --buttonSize: 15px;
        --buttonInnerGap: 4px;
    }
    &.avia-size-large{
        --buttonSize: 17px;
        --buttonInnerGap: 6px;
    }
}

#top{
    .avia-buttonrow-wrap,
    .wp-block-buttons{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        &.avia-buttonrow-left,
        &.is-content-justification-left{
            justify-content: flex-start;
        }
        &.avia-buttonrow-center,
        &.is-content-justification-center{
            justify-content: center;
        }
        &.avia-buttonrow-right,
        &.is-content-justification-right{
            justify-content: flex-end;
        }
        &.is-content-justification-space-between{
            justify-content: space-between;
        }
    }
    .avia-buttonrow-wrap{
        margin-left: -10px;
        margin-right: -10px;
        .avia-button{
            margin: 5px 10px !important;
        }
    }
    .wp-block-buttons{
        &.is-content-justification-left{
            .wp-block-button{
                margin-left: -10px;
            }
        }
        &.is-content-justification-right{
            .wp-block-button{
                margin-right: -10px;
            }
        }
        &.is-content-justification-center{
            .wp-block-button{
                a{
                    margin: 5px;
                }
            }
        }
        &.is-content-justification-space-between{
            .wp-block-button{
                a{
                    margin: 5px 0;
                }
            }
        }
    }
}

@media only screen and (max-width: 989px){
    #top{
        .avia-buttonrow-wrap{
            &.avia-buttonrow-tablet-center{
                justify-content: center;
            }
            &.avia-buttonrow-tablet-right{
                justify-content: flex-end;
            }
            &.avia-buttonrow-tablet-left{
                justify-content: flex-start;
            }
        }
    }
}

@media only screen and (max-width: 767px){
    #top{
        .avia-buttonrow-wrap{
            &.avia-buttonrow-mobile-center{
                justify-content: center;
            }
            &.avia-buttonrow-mobile-right{
                justify-content: flex-end;
            }
            &.avia-buttonrow-mobile-left{
                justify-content: flex-start;
            }
        }
    }
}