:root {
    --color-1-primary: purple;
    --color-1-secondary: lightblue;
    --color-1-light: white;
    --color-1-red: #b91515;
}


.x-button-hover-red:hover {
    color: var(--color-1-red) !important;
}

/* BUTTON: SECONDARY OUTLINE */
.x-action-button-secondary-outline {
    box-shadow: unset;
    border: 2px solid black;
    font-weight: 400;
    background: var(--color-1-light) !important;
    border-color: black !important;
    color: black !important;
    position: relative;
}

    .x-action-button-secondary-outline:focus {
        border: 2px solid currentColor !important;
        box-shadow: unset !important;
        border-color: currentColor !important;
        background: unset !important;
        color: currentColor !important;
        outline: unset !important;
    }

    .x-action-button-secondary-outline:hover {
        border: 2px solid black !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
    }

    .x-action-button-secondary-outline:active {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
        outline: unset !important;
    }

    /* STD EFFECT */
    .x-action-button-secondary-outline-effect::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 32px;
        height: 32px;
        background-color: var(--color-1-light);
        border-color: transparent;
        border-radius: 50%;
        transform: scale(0.1);
        opacity: 0;
        transition: all 0.4s;
        border: 2px solid var(--color-1-primary);
    }

    .x-action-button-secondary-outline-effect:hover::after {
        opacity: 1;
        transform: scale(1);
        border: 2px solid var(--color-1-primary);
    }

/* BUTTON: SECONDARY OUTLINE (NO BORDER) */
.x-action-button-secondary-outline-noborder {
    box-shadow: unset;
    font-weight: 400;
    background: var(--color-1-light) !important;
    color: black !important;
    position: relative;
    border: none !important;
}

    .x-action-button-secondary-outline-noborder:focus {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
        color: currentColor !important;
        outline: unset !important;
    }

    .x-action-button-secondary-outline-noborder:hover {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
      /*  color: var(--color-1-primary) !important; */
    }

    .x-action-button-secondary-outline-noborder:active {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
        /* color: var(--color-1-primary) !important; */
        outline: unset !important;
    }

    /* STD EFFECT */
    .x-action-button-secondary-outline-noborder-effect::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 32px;
        height: 32px;
        background-color: var(--color-1-light);
        border-color: transparent;
        border-radius: 50%;
        transform: scale(0.1);
        opacity: 0;
        transition: all 0.4s;
        border: 2px solid var(--color-1-primary);
    }

    .x-action-button-secondary-outline-noborder-effect:hover::after {
        opacity: 1;
        transform: scale(1);
        border: 2px solid var(--color-1-primary);
    }


/* BUTTON: PRIMARY OUTLINE */
.x-action-button-primary-outline {
    box-shadow: unset;
    border: 2px solid var(--color-1-primary);
    font-weight: 400;
    background: var(--color-1-light) !important;
    border-color: var(--color-1-primary) !important;
    color: var(--color-1-primary) !important;
    position: relative;
}

    .x-action-button-primary-outline:focus {
        border: 2px solid currentColor !important;
        box-shadow: unset !important;
        border-color: currentColor !important;
        background: unset !important;
        color: currentColor !important;
        outline: unset !important;
    }

    .x-action-button-primary-outline:hover {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: unset !important;
        color: var(--color-1-light) !important;
    }

    .x-action-button-primary-outline:active {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
        outline: unset !important;
    }

    /* STD EFFECT */
    .x-action-button-primary-outline-effect::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 32px;
        height: 32px;
        background-color: var(--color-1-primary);
        border-color: transparent;
        border-radius: 50%;
        transform: scale(0.1);
        opacity: 0;
        transition: all 0.4s;
        border: 2px solid var(--color-1-primary);
    }

    .x-action-button-primary-outline-effect:hover::after {
        opacity: 1;
        transform: scale(1);
    }

/* BUTTON: PRIMARY OUTLINE (NO BORDER) */
.x-action-button-primary-outline-noborder {
    box-shadow: unset;
    font-weight: 400;
    background: var(--color-1-light) !important;
    color: var(--color-1-primary) !important;
    position: relative;
    border: none !important;
}

    .x-action-button-primary-outline-noborder:focus {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
        color: currentColor !important;
        outline: unset !important;
    }

    .x-action-button-primary-outline-noborder:hover {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
    }

    .x-action-button-primary-outline-noborder:active {
        border: none !important;
        box-shadow: unset !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
        outline: unset !important;
    }
    /* STD EFFECT */
.x-action-button-primary-outline-noborder-effect:hover {
    color: var(--color-1-light) !important;
}

    .x-action-button-primary-outline-noborder-effect::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 32px;
        height: 32px;
        background-color: var(--color-1-primary);
        border-color: transparent;
        border-radius: 50%;
        transform: scale(0.1);
        opacity: 0;
        transition: all 0.4s;
        border: 2px solid var(--color-1-primary);
    }

    .x-action-button-primary-outline-noborder-effect:hover::after {
        opacity: 1;
        transform: scale(1);
    }

    /* BUTTON: PRIMARY FILLED */
    .x-action-button-primary-filled {
        box-shadow: unset;
        border: 2px solid var(--color-1-primary);
        font-weight: 400;
        background: var(--color-1-primary) !important;
        border-color: var(--color-1-primary) !important;
        color: var(--color-1-light) !important;
        position: relative;
    }

    .x-action-button-primary-filled:focus {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: var(--color-1-primary) !important;
        color: var(--color-1-light) !important;
        outline: unset !important;
    }

    .x-action-button-primary-filled:hover {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        color: var(--color-1-primary) !important;
    }

    .x-action-button-primary-filled:active {
        border: 2px solid var(--color-1-primary) !important;
        box-shadow: unset !important;
        border-color: var(--color-1-primary) !important;
        background: unset !important;
        color: var(--color-1-primary) !important;
        outline: unset !important;
    }

    .x-action-button-primary-filled::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 32px;
        height: 32px;
        background-color: var(--color-1-light);
        border-color: transparent;
        border-radius: 50%;
        transform: scale(0.1);
        opacity: 0;
        transition: all 0.4s;
        border: 2px solid var(--color-1-primary);
    }

    .x-action-button-primary-filled:hover::after {
        opacity: 1;
        transform: scale(1);
    }

/* ICON SETTINGS */
.x-button-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

.x-action-button-icon {
    width: 16px !important;
    height: 16px !important;
    margin-left: 0 !important;
    z-index: 1;
    position: relative;
    transition: all 0.4s;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}


/* animations */
.x-button-shake-1:hover {
    animation: shake-action-button 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
    color: var(--color-1-primary) !important;
}

.x-button-shake-1-nocolor:hover {
    animation: shake-action-button 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

@keyframes shake-action-button {
    10%, 90% {
        transform: translate3d(-0.5px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(0.5px, 0.5px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-0.7px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(0.5px, -0.5px, 0);
    }
}