@import 'inc/bootstrap';

$animationFunction: cubic-bezier(0.2, 0.6, 1, 0.4);
$background: $darkBarTxt;
.absorbable {
    z-index: 1; //create a stacking context to ensure it is display on top of its container
    border-radius: 0%;
    background: $background;
    opacity: 0;
    &.animate {
        transform: translateZ(0);
        transition-timing-function: $animationFunction;
        @include animation(absorbable-opacity 2s $animationFunction 1);
    }
    @include keyframes(absorbable-opacity) {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 0.3;
            border-radius: 20%;
        }
        60% {
            opacity: 0.9;
        }
        100% {
            border-radius: 50%;
        }
    }

    .example {
        display: grid;
        transition: all 0.5s;
        user-select: none;
        background: linear-gradient(to bottom, white, black);
    }
}