journal-to-canvas-slideshow/styles/_mixins.scss

@mixin with-absolute-pseudo($centeredX: true, $centeredY: true, $isBefore: true) {
    $pseudoSelector: before;
    @if ($isBefore != true) {
        $pseudoSelector: after;
    }
    position: relative;
    &:#{$pseudoSelector} {
        position: absolute;
        content: "";
        @if ($centeredX and not $centeredY) {
            left: 50%;
            transform: translateX(-50%);
        } @else if ($centeredY and not $centeredX) {
            top: 50%;
            transform: translateY(-50%);
        } @else if($centeredX and $centeredY) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
.blank-button {
    border: none;
    background: transparent;
    margin: unset;
    padding: unset;
}

@function returnAllHeadings($startLevel: 1, $endLevel: 6) {
    $selectorList: [];
    @for $var from $startLevel to $endLevel {
        $headerSelector: "h#{$var}";
        $selectorList: join($selectorList, $headerSelector);
    }
    @return $selectorList;
}
@mixin printSelectors($selectorList, $propertyMap) {
    @for $i from 1 to length($selectorList) {
        #{nth($selectorList, $i)} {
            @each $property, $value in $propertyMap {
                #{$property}: $value;
            }
        }
    }
}
@mixin text-shadow($shadow-color: black) {
    text-shadow: -1px -1px 0 $shadow-color, 0 -1px 0 $shadow-color,
        1px -1px 0 $shadow-color, 1px 0 0 $shadow-color, 1px 1px 0 $shadow-color,
        0 1px 0 $shadow-color, -1px 1px 0 $shadow-color, -1px 0 0 $shadow-color;
}

@mixin JTCS-accent-ghost($primary-color: var(--JTCS-accent-color), $border-side: "") {
    background-color: transparent;
    color: $primary-color;
    border#{$border-side}: 2px solid $primary-color;
    transition: background-color 120ms ease-in, color 120ms ease-in;
    &:hover,
    &:focus,
    &.active {
        transition: background-color 120ms ease-out, color 120ms ease-out;
        background-color: $primary-color;
        // color: var(--JTCS-text-color-on-bg);
        color: var(--JTCS-text-color-on-fill);
    }
}
@mixin JTCS-accent-ghost-input-span($primary-color: var(--JTCS-accent-color)) {
    input:disabled + label {
        opacity: 50%;
    }
    display: inline-flex;
    &[data-variant="visible-tick"] {
        input[type="radio"],
        input[type="checkbox"] {
            @extend .JTCS-hidden;

            + label {
                background-color: transparent;
                color: $primary-color;
                border: 2px solid $primary-color;

                transition: background-color 120ms ease-in, color 120ms ease-in;
                &:hover,
                &:focus {
                    transition: background-color 120ms ease-out, color 120ms ease-out;
                    background-color: $primary-color;
                    color: var(--JTCS-text-color-on-fill);
                }
                .tick-circle,
                .tick-box {
                    border: 1px solid $primary-color;
                    display: inline-flex;
                    width: 1rem;
                    height: 1rem;
                    background-color: var(--JTCS-background-color);
                }
                .tick-circle {
                    border-radius: 50%;
                }
            }
            &:checked {
                + label {
                    color: var(--JTCS-text-color-on-fill);
                    background-color: $primary-color;
                    border: 2px solid $primary-color;
                    outline: 1.5px solid transparent;
                    outline-offset: -1px;
                    // transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
                    transition: outline-color 200ms ease-out, box-shadow 200ms ease-out;
                    &:hover {
                        outline-color: white;
                        box-shadow: 0px 0px 4px 2px $primary-color;
                        color: var(--JTCS-text-color-on-fill);
                        // color: var(--JTCS-text-color-on-bg);
                    }
                    // background-color: var(--accent-color);
                    .tick-circle,
                    .tick-box {
                        @include with-absolute-pseudo($isBefore: false);
                        &:after {
                            width: 0.5rem;
                            height: 0.5rem;
                        }
                    }
                    .tick-circle {
                        &:after {
                            border-radius: 50%;
                            background-color: $primary-color;
                        }
                    }
                    .tick-box {
                        &:after {
                            content: "✓";
                            color: $primary-color;
                            top: unset;
                        }
                    }
                }
            }
        }
    }
}

@mixin JTCS-accent-fill(
    $primary-color: var(--JTCS-accent-color),
    $include-shadow: false,
    $hoverStyle: "scale",
    $is-icon-button: false
) {
    background-color: $primary-color;
    @if $include-shadow {
        box-shadow: 0px 0px 8px 2px $primary-color;
    } @else {
        box-shadow: unset;
    }
    color: var(--JTCS-text-color-on-fill);
    border: unset;
    @if $hoverStyle == "scale" {
        transform: scale(1);
        transition: transform 120ms ease-in-out;
        transition: transform 120ms ease-in-out;
    } @else if $hoverStyle == "slide-in" {
        position: relative;
        overflow: hidden;
        i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 100%;
            transform: translateX(0);
            transition: transform 220ms ease-in;
            background-color: var(--JTCS-accent-color-20);
            height: 100%;
            width: 30%;
        }
    } @else if $hoverStyle == "border" {
        position: relative;
        border: 2px solid transparent;
        transition: border-color 150ms ease-in;
        // &:after {
        //     position: absolute;
        //     content: "";
        //     top: 50%;
        //     left: 50%;
        //     transform: translate(-50%, -50%);
        //     width: 100%;
        //     height: 100%;
        //     z-index: 1;
        //     border-radius: 3px;
        //     border: 2px solid var(--JTCS-accent-color-20);
        //     opacity: 0;
        //     transition: opacity 240ms ease-in;
        // }
    }
    &:hover,
    &:focus {
        @if $hoverStyle == "scale" {
            transform: scale(1.12);
        } @else if $hoverStyle == "slide-in" {
            i {
                transform: translateX(100%);
                transition: transform 220ms ease-out;
            }
        } @else if $hoverStyle == "border" {
            border: 2px solid var(--JTCS-accent-color-80);
            transition: border-color 150ms ease-out;
            // &:after {
            //     opacity: 100%;
            //     transition: opacity 240ms ease-out;
            // }
        }
    }
}
@mixin generateTypes(
    $list: (
        "frame",
        "art",
        "unlinked",
        "default",
    ),
    $propertyPrefix: ""
) {
    @each $var in $list {
        .#{$var}-color {
            #{$propertyPrefix}color: var(--data-#{$var}-color);
        }
    }
}