@mixin hidden() {
    opacity: 0;
    visibility: hidden;
}

@mixin dropShadow($blur: 4) {
    filter: drop-shadow(0 0 #{$blur}px var(--color-shadow-primary));
}

@mixin fontFamily2($spacing: false, $color: false) {
    font-family: var(--font-family-2);

    @if $color {
        color: var(--text-color);
    }

    @if $spacing {
        letter-spacing: #{$spacing}px;
    }
}

@mixin handDrawnBorders($thickness: 1) {
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius: 15px 255px;
    border: solid #{$thickness}px var(--border-color);
}

@mixin handDrawnInput($thickness: 1, $height: false) {
    border-bottom-right-radius: 30px 3px;
    border-bottom-left-radius: 120px 1px;
    border-bottom: #{$thickness}px solid var(--border-color);
    background: none;
    box-shadow: none;
    padding-bottom: 0;
    font-family: var(--font-family);
    font-weight: normal;
    color: var(--text-color);

    @if $height {
        height: $height;
    }
}

@mixin handDrawButton($border: 1) {
    @include handDrawnBorders($border);

    box-shadow: none;
    background: url("/modules/pf2e-toolbelt/images/scribble/scribble-mask-75.webp");
    color: var(--text-color);
    font-family: var(--font-family);

    &:hover {
        box-shadow: inset 0 0 3px 0px var(--color-shadow-primary);
    }
}

@mixin scribbleMask() {
    mask-image: url("/modules/pf2e-toolbelt/images/scribble/scribble-mask.webp");
    mask-position: center;
}

@mixin handDrawnTag($border: false, $letter: 1, $mask: false) {
    @include fontFamily2($letter);

    font-size: var(--font-size-11);

    @if $mask {
        @include scribbleMask();
    }

    @if $border {
        @include handDrawnBorders($border);
    }
}

@mixin iconImg($url, $size: contain) {
    background-size: $size;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url($url);

    &::before,
    &::after,
    path {
        @include hidden();
    }
}