.btn,
.btn span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    padding: 0;
}

/* Hyerarchy: Display > Primary > Secondary > Tertiary */

.button-display {
    height: 36px;
    gap: 6px;
    border-radius: 24px;
    font-weight: 500;
    padding: 0 12px;
    background: var(--brand-primary);

    &:hover,
    &:active {
        background: var(--brand-primary-dark) !important;
        color: var(--white);
    }

    span {
        color: var(--white) !important;
        font-size: 14px !important;
    }

    &.display-outline {
        background: transparent;
        border: 1.5px solid var(--brand-primary);
        color: var(--brand-primary);

        &:hover {
            background: var(--brand-primary-50) !important;
            color: var(--brand-primary-dark);
            border: 1.5px solid var(--brand-primary);
        }

        &:active {
            background: var(--brand-primary-200) !important;
            color: var(--brand-primary-dark);
            border: 1px solid var(--brand-primary);
        }

        span {
            color: var(--brand-primary) !important;
        }
    }
}

.btn.btn-primary,
.btn.button-primary {
    height: 36px;
    padding: 0 16px !important;
    background-color: var(--brand-primary) !important;
    gap: .375rem;
    color: var(--white) !important;
    font-weight: 600;
    border: 1px solid var(--brand-primary) !important;

    &:hover,
    &:active {
        background-color: var(--brand-primary-dark) !important;
        color: var(--white);
        border: 1px solid var(--brand-primary-dark) !important;
    }
    &:active {
        border-color: var(--white);
        border: 1px solid var(--white) !important;
    }
}

.btn.btn-secondary,
.btn.button-secondary {
    height: 36px;
    padding: 0 16px !important;
    background-color: var(--gray-100) !important;
    gap: .375rem;
    border: 1px solid var(--gray-100) !important;
    &:hover {
        background-color: var(--gray-200) !important;
        color: var(--text);
        border: 1px solid var(--gray-200) !important;
    }
    &:active {
        border-color: var(--white) !important;
        border: 1px solid var(--white) !important;
        color: var(--text);
    }
    /* Bootstrap overrides */
    --bs-btn-active-border-color: var(--white) !important;

    &.secondary-green {
        background-color: var(--brand-primary-50) !important;
        border: 1px solid var(--brand-primary-50) !important;
        &:hover{
            background-color: var(--brand-primary-150) !important;
            border: 1px solid var(--brand-primary-150) !important;
        }

        &:active {
            background-color: var(--brand-primary-150) !important;
            border: 1px solid var(--white) !important;
        }
    }
}

.btn.button-tertiary {
    height: 36px;
    padding: 0 12px;
    gap: .375rem;
    &:hover {
        background-color: var(--gray-100) !important;
    }
    &:active {
        border-color: var(--white) !important;
    }
    /* Bootstrap overrides */
    --bs-btn-active-border-color: var(--white) !important;

    &.tertiary-green {
        border: 1px solid var(--white) !important;
        &:hover{
            background-color: var(--brand-primary-50) !important;
            border: 1px solid var(--brand-primary-50) !important;
        }
        &:active {
            background-color: var(--brand-primary-100) !important;
            border: 1px solid var(--white) !important;
        }
    }


    &.text-green,
    &.text-green span {
        color: var(--brand-primary);
    }
}

/* Shape */

.btn.button-square {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    &.square-small {
        width: 24px;
        height: 24px;
    }
    &.fixed-border {
        border: 1px solid var(--gray-200);
    }
}

.btn.button-narrow {
    width: 28px !important;
    height: 36px;
    padding: 0 !important;
    justify-content: center;
}

/* Role */

.btn.button-dropdown {
    padding: 0 24px 0 4px !important;

    > .dropdown-toggle::after {
        content: "";
        margin-left: 0;
        vertical-align: 0;
        border: 0;
        width: 20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("images/icons/exe-chevron-icon-green.svg");
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

.btn.button-combo {
    &.combo-left {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    &.combo-center {
        border-radius: 0;
    }
    &.combo-right {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

/*
PENDING Add to Docs:
Flexbox Bootstrap 5 helpers:
    - Center start: d-flex align-items-center justify-content-start
    - Center center: d-flex justify-content-center align-items-center
*/