//----------------------------------------------------------------------------------------------------------------------
// Custom Mixins
//----------------------------------------------------------------------------------------------------------------------

@use "sass:math";

//----------------------------------------------------------------------------------------------------------------------

@mixin cut-corner(
    $corner-size,
    $border-width : $border-width,
    $greeblie-length: $corner-size,
    $greeblie-thickness: 2px,
    $greeblie-offset: 5px
)
{
    $side: math.hypot($corner-size, $corner-size);

    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - $corner-size), calc(100% - $corner-size) 100%, 0 100%);

    border: none !important;

    // Corner Greeblie
    &:before
    {
        $length: $greeblie-length;
        $thickness: $greeblie-thickness;

        // The offset from the cut corner
        $offset: $greeblie-offset;

        // The correctly calculated offset for the little corner greeblie.
        $calc-offset: calc($offset + ($corner-size / 2));

        content: "";
        position: absolute;
        right: $calc-offset;
        bottom: calc($calc-offset - ($length / 2)) + calc($thickness / 2);
        height: $length;
        width: $thickness;
        transform: rotate(45deg);
        border-radius: calc($thickness / 2);
        background-color: var(--#{$prefix}card-border-color);
    }

    // Faux Border
    &:after {
        content: "";
        position: absolute;
        top: calc(-1 * $border-width + 1px);
        bottom: calc(-1 * $border-width + 1px);
        left: calc(-1 * $border-width + 1px);
        right: calc(-1 * $border-width + 1px);
        background-color: var(--#{$prefix}card-border-color);
        clip-path: polygon(
                0 0,
                0 100%,

                // Inner cutout
                $border-width 100%,
                $border-width $border-width,
                calc(100% - $border-width) $border-width,

                calc(100% - $border-width) calc(100% - $corner-size - $border-width),
                calc(100% - $corner-size - $border-width) calc(100% - $border-width),

                $border-width calc(100% - $border-width),
                $border-width 100%,

                // Return to corner cutting
                calc(100% - $corner-size) 100%,
                100% calc(100% - $corner-size),
                100% 0
        );
    }

    @each $color, $value in $utilities-border-colors {
        &.border-#{$color}:before,
        &.border-#{$color}:after,
        {
            background-color: $value;
            border-color: $value;
        }
    }

    @each $color, $value in $utilities-border-subtle {
        &.border-#{$color}:before,
        &.border-#{$color}:after,
        {
            background-color: $value;
            border-color: $value;
        }
    }
}

//----------------------------------------------------------------------------------------------------------------------
