@use "../utilities" as *;

/**
    Buttons CSS
*/

.mt-primary-btn {
    background-color: var(--mt-color-theme-primary);
    font-family: var(--mt-ff-body);
    color: var(--mt-color-common-white);
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    padding: 14.5px 30px;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    position: relative;
    z-index: 1;
    &:before {
        content: "";
        background-color: var(--mt-color-theme-primary);
        width: 0;
        height: 50%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        z-index: -1;
    }
    &:after {
        content: "";
        background-color: var(--mt-color-theme-primary);
        width: 0;
        height: 50%;
        position: absolute;
        bottom: 0;
        right: 0;
        transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        z-index: -1;
    }
    &:hover {
        color: var(--mt-color-common-white);
        &:before,
        &:after {
            width: 100%;
        }
    }
}

.mt-primary-btn {
    &.primary-2 {
        background-color: var(--mt-color-theme-secondary);
        color: var(--mt-color-heading-primary);
        &:hover {
            color: var(--mt-color-common-white);
        }
        &:after,
        &:before {
            background-color: var(--mt-color-theme-primary);
        }
    }
}
