@import '../common/_variables.scss';

.gradial-button {
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: $dark-color;
    padding: $offset-sm $offset-lg;
    transition: all $animation-fast;
    position: relative;
    border-radius: $offset-mc;
    &:focus {
        box-shadow: 0 7px 15px 0 rgba(157, 104, 172, 0.5);
    }
    &--shadow {
        box-shadow: 0 7px 20px 0 rgba(157, 104, 172, 0.5);
        &:active {
            box-shadow: none;
        }
        &:hover {
            box-shadow: 0 7px 26px 0 rgba(157, 104, 172, 0.5);
        }
        &:focus {
            box-shadow: 0 1px 5px 0 rgba(157, 104, 172, 0.2);
        }
    }
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: $lighter-color;
    }
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: inherit;
        transition: opacity 0.2s ease-in-out;
        -webkit-transition: opacity 0.2s ease-in-out;
        background-image: linear-gradient(240deg, #bac4cf, #d3dbe3);
    }
    &:hover::after {
        opacity: 1;
    }
    &-blue {
        color: $white-color;
        &.button--shadow {
            box-shadow: 0 7px 26px 0 rgba(157, 104, 172, 0.5);
            &:hover {
                box-shadow: 0 7px 26px 0 rgba(157, 104, 172, 0.5);
            }
            &:active {
                box-shadow: none;
            }
            &:focus {
                box-shadow: 0 1px 5px 0 rgba(157, 104, 172, 0.2);
            }
        }
        &::before {
            background-color: $focus-color;
        }
        &::after {
            background-image: linear-gradient(240deg, #0551ff, #ff006c);
        }
    }
    &-red {
        color: $white-color;
        &.button--shadow {
            box-shadow: 0 7px 26px 0 rgba(157, 104, 172, 0.5);
            &:hover {
                box-shadow: 0 7px 26px 0 rgba(157, 104, 172, 0.5);
            }
            &:active {
                box-shadow: none;
            }
            &:focus {
                box-shadow: 0 1px 5px 0 rgba(157, 104, 172, 0.2);
            }
        }
        &::before {
            background-color: $important-color;
        }
        &::after {
            background-image: linear-gradient(240deg, #ff006c, #0551ff);
        }
    }
}