.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    font-family: var(--font-title);
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    transition: all 350ms ease;

    &.btn-sm {


        & svg {
            height: 16px !important;
        }
    }

    &:not(.btn-sm),
    &:not(.page-header__add) {

        & svg {
            width: auto;
            height: 10px;

            & path {
                transition: all 350ms ease;
            }
        }
    }

    &.btn-icon-split {
        position: relative;
        padding: 10px 10px 10px 60px;

        & > a,
        .icon {

            &:nth-child(1) {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 40px;
                z-index: 2;

                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    opacity: 0.2;
                    z-index: 0;

                    content: '';
                }
            }
        }

        & .text {
            padding: 0;
        }
    }
}

.btn-primary--blue-100 {
    background-color: var(--blue-100);
    color: var(--black);

    .icon {

        &::after {
            background: var(--blue-200);
        }
    }

    & svg {

        & path {
            fill: var(--black);
        }
    }

    &:hover {
        color: var(--black);
        background-color: var(--blue-200);

        & svg {

            & path {
                fill: var(--black);

            }
        }
    }
}

.btn-primary--blue-200 {
    background-color: var(--blue-200);
    color: var(--black);

    &:hover {
        color: var(--black);
        background-color: var(--blue-100);

        & svg {

            & path {
                fill: var(--black);

            }
        }
    }

    &.active {
        background-color: var(--blue-100);
    }
}

.btn-primary--black {
    background-color: var(--black);
    color: var(--white);

    .icon {

        &::after {
            background: var(--white);
        }
    }

    & svg {

        & path {
            fill: var(--white);
        }
    }

    &:hover {
        color: var(--black);
        background-color: var(--blue-100);

        & svg {

            & path {
                fill: var(--black);

            }
        }
    }
}

.btn-primary--red-100 {
    background-color: var(--red-100);
    color: var(--white);

    .icon {

        &::after {
            background: var(--white);
        }
    }

    & svg {

        & path {
            fill: var(--white);
        }
    }

    &:hover {
        color: var(--white);
        background-color: var(--red-200);

        & svg {

            & path {
                fill: var(--white);

            }
        }
    }
}

.btn-primary--red-200 {
    background-color: var(--red-200);
    color: var(--white);

    .icon {

        &::after {
            background: var(--white);
        }
    }

    & svg {

        & path {
            fill: var(--white);
        }
    }

    &:hover {
        color: var(--white);
        background-color: var(--black);

        & svg {

            & path {
              fill: var(--white);

            }
        }
    }
}

.btn-primary--green {
    background-color: var(--green);
    color: var(--white);

    .icon {

        &::after {
            background: var(--white);
        }
    }

    & svg {

        & path {
            fill: var(--white);
        }
    }

    &:hover {
        color: var(--white);
        background-color: var(--black);

        & svg {

            & path {
                fill: var(--white);

            }
        }
    }
}

.btn-primary--white {
    background-color: var(--white);
    color: var(--black);

    .icon {

        &::after {
            background: var(--black);
        }
    }

    & svg {

        & path {
            fill: var(--black);
        }
    }

    &:hover {
        color: var(--white);
        background-color: var(--black);

        & svg {

            & path {
                fill: var(--white);

            }
        }
    }
}