@use "../utilities" as *;

/**
  Buttons CSS
*/

.lt-primary-btn {
    background-color: var(--lt-color-theme-primary);
    font-family: var(--lt-ff-heading);
    color: var(--lt-color-common-white);
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    position: relative;
    z-index: 1;
    &:before {
        content: "";
        background-color: var(--lt-color-heading-primary);
        width: 100%;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        z-index: -1;
    }
    &:hover {
        color: var(--lt-color-common-white);
        font-weight: 600;
        &:before{
            height: 100%;;
        }
    }
    i{
        font-size: 12px;
        margin-left: 5px;
    }
}

.lt-primary-btn {
    &.primary-2 {
        &:hover {
            color: var(--lt-color-heading-primary);
        }
        &:before {
            background-color: var(--lt-color-common-white);
        }
    }
    &.transparent{
        background-color: transparent;
        border: 1px solid var(--lt-color-border-2);
        color: var(--lt-color-heading-primary);
        font-weight: 600;
        &:before{
            background-color: var(--lt-color-theme-primary);
        }
        &:hover{
            color: var(--lt-color-common-white);
            border: 1px solid var(--lt-color-theme-primary);
        }
    }
}