/home/moonrcjl/template.moontelict.com/attorix/assets/scss/components/_buttons.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/

.mt-btn {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--mt-ff-body);
    height: 60px;
    padding: 0px 30px;
    line-height: 60px;
    display: inline-block;
    color: var(--mt-common-white);
    @include transition(.6s);
    position: relative;
    background: var(--mt-theme-1);
     border: 1px solid var(--mt-theme-1);
    border-radius: 50px;

    & cite {
        margin-left: 5px;
    }

    &.mtwhite {
        background: var(--mt-common-white);
        color: #000;
    }
    &.mtbornone{
        border-radius: 0px;
    }

    &.mtsmall {
        height: 40px;
        padding: 0px 22px;
        line-height: 40px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--mt-ff-body);
        color: var(--mt-common-black);

        &-2 {
            background-color: var(--mt-common-white-2);
        }

        & svg {
            transform: translateY(-2px);
        }
    }


    &:hover {
        background: var(--mt-theme-2);
        color: var(--mt-common-white);
        
    }

}

.mt-btn-black {
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    line-height: 48px;
    display: inline-block;
    color: var(--mt-common-white);
    background-color: var(--mt-common-black-2);
    text-transform: capitalize;
    transition: all 0.5s ease-in-out;
    position: relative;
    border-radius: 5px;

    & span {
        position: relative;
        z-index: 1;
        font-size: 22px;

    }

    & i {
        transform: translateY(2px);
        margin: 0 2px;
    }

    &.small {
        border-radius: 0px;
        font-weight: 600;
        height: 50px;
        line-height: 50px;
        padding: 0px 44px;

        & span {
            font-size: 14px;
        }
    }

    &.mtsmall {
        height: 40px;
        padding: 0px 22px;
        line-height: 40px;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--mt-ff-body);
        color: var(--mt-common-white-2);
        background-color: var(--mt-common-black-2);


        & svg {
            transform: translateY(-2px);
        }
    }

    &:hover {
        color: var(--mt-common-white);

        &.small {
            background-color: var(--mt-theme-2);
            color: var(--mt-common-black);

        }
    }

}

.mt-btn-border {
    padding: 0px 24px;
    font-size: 16px;
    font-weight: 700;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    color: var(--mt-common-white);
    border: 1px solid rgba(237, 237, 238, 0.20);
    @include transition(.5s);
    position: relative;
    border-radius: 5px;
    font-family: var(--mt-ff-body);
    font-weight: 700;

    & span, & cite {
        margin-left: 6px;
        display: inline-block;
    }
    &.mtback{
        border: 1px solid var(--mt-common-black-2);
        color: #000;
    }

    &.mtbcolor {
        border: 1px solid rgba(3, 0, 17, 0.10);
        border-radius: 50px;
        height: 45px;
        line-height: 42px;
        color: var(--mt-common-black-2);

        & img {
            -webkit-filter: brightness(1) invert(1);
            filter: brightness(1) invert(1);
            transition: .4s;
        }
    }

    &:hover {
        color: var(--mt-common-white);
        border-color: var(--mt-common-black-2);
        background-color: var(--mt-common-black-2);

        &.mtwhite {
            border: 1px solid var(--mt-theme-2);
            color: var(--mt-theme-2);
        }

        & img {
            -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
        }

    }

}