@use "../../dev" as *;
@use "../../variables" as *;

// ============================================================================
// StyleScape | Borders | Effects
// ============================================================================

// Mixin: vignette
// Adds a strong inset box-shadow around an element,
// creating a "vignette" effect at the edges.

// @example
// .element {
// @include vignette;
// }

@mixin vignette {
    box-shadow: 0 0 q(200) rgba(0, 0, 0, 0.9) inset;
}

/// Class for adding a hover effect on the border.
/// The border color changes to blue on hover.
/// @example
/// .element { @extend .border_hover_effect; }
.border_hover_effect {
    transition: border-color 0.3s ease;

    &:hover {
        @include border_color(blue);
    }
}

/// Mixin for creating an animated border.
/// The border width increases on hover.
/// @param {Time} $duration - The duration of the border width transition.
/// @param {Color} $color - The border color.
/// @example
/// .element { @include border_animated(0.5s, red); }
@mixin border_animated($duration: 0.5s, $color: blue) {
    border: q(2) solid $color;
    transition: border-width $duration ease;

    &:hover {
        border-width: q(4);
    }
}

/// Class for applying an animated border effect to an element.
/// The border width increases on hover, using the default duration and color.
/// @example
/// .element { @extend .border_animated; }
.border_animated {
    @include border_animated();
}

/// Class for creating an animated dotted border.
/// The border color alternates between transparent and blue.
/// @example
/// .element { @extend .border_dotted-animated; }
.border_dotted-animated {
    border-style: dotted;
    animation: dotted-border-animation 1s linear infinite;
}

/// Keyframes for the dotted border animation.
/// The border color alternates between transparent and blue.
@keyframes dotted-border-animation {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: blue;
    }
    100% {
        border-color: transparent;
    }
}