box.scss

@import "./colors.scss";

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

.c-box {
    padding: $box-padding / 2 $box-padding !important;
    background-color: white;
    position: relative;
    transition: box-shadow $transition-duration ease-in-out;
    @extend .border-gradient;
    @extend .rounded;
    box-shadow: $box-shadow;

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

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

.c-box-title {
    $text-color: black;
    color: $text-color;
    padding: 0.5em 0;
    margin-top: 0.2em;

    small {
        font-size: 0.75em;
        color: rgba($text-color, 0.65);
        &::before {
            content: "(";
        }
        &::after {
            content: ")";
        }
    }
}

.rounded {
    border-radius: $border-radius;
}

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

.border-gradient {
    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;

    &::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;
    }
}