box.scss

@import "./colors.scss";

$box-padding: 10px;
$border-radius: 0.25em;
$border-width: 2px;
$transition-duration: 0.3s;

.c-box {
    padding: $box-padding;
    background-color: white;
    position: relative;
    border-radius: $border-radius;
    transition: box-shadow $transition-duration ease-in-out;

    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(
                180deg,
                rgba(map-get($theme-colors, "primary"), 0.4) 0%,
                rgba(map-get($theme-colors, "primary"), 0.2) 40%,
                rgba(map-get($theme-colors, "primary"), 0.1) 100%
            )
            border-box;
    border: $border-width solid transparent;
    box-shadow: $box-shadow;

    &::before {
        content: "";
        position: absolute;
        top: -$border-width;
        left: -$border-width;
        right: -$border-width;
        bottom: -$border-width;
        background: linear-gradient(
            180deg,
            rgba(map-get($theme-colors, "primary"), 0.4) 0%,
            rgba(map-get($theme-colors, "primary"), 0.2) 60%,
            rgba(map-get($theme-colors, "primary"), 0.1) 100%
        );
        border-radius: inherit;
        z-index: -1;
        opacity: 0;
        transition: opacity $transition-duration ease-in-out;
    }

    &:hover {
        box-shadow: 0 0.5rem 1rem rgba(map-get($theme-colors, "primary"), 0.2);

        &::before {
            opacity: 1;
        }
    }
}

.abstract-box {
    padding: $box-padding;
    font-size: 0.9em;
    border-radius: calc($border-radius / 2);
}