@use "sass:math";

button {
    outline: 0;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    outline: 0;
    border: 0;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    padding: 5px 20px;
    column-gap: 7px;
    user-select: none;
    min-width: var(--btnHeight);
    min-height: var(--btnHeight);
    text-align: center;
    text-decoration: none;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    font-size: var(--baseFontSize);
    font-family: var(--baseFontFamily);
    border-radius: var(--btnRadius);
    background: none;
    transition: color var(--baseAnimationSpeed);
    i {
        font-size: 1.1428em;
        vertical-align: middle;
        display: inline-block;
    }
    .dropdown {
        user-select: text;
    }

    // background layer
    &:before {
        content: '';
        border-radius: inherit;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
        backface-visibility: hidden;
        background: var(--primaryColor);
        transition: filter var(--baseAnimationSpeed),
                    opacity var(--baseAnimationSpeed),
                    transform var(--baseAnimationSpeed),
                    background var(--baseAnimationSpeed);
    }

    // hover/active states
    &:hover,
    &:focus-visible {
        &:before {
            opacity: 0.9;
        }
    }
    &.active,
    &:active {
        z-index: 999;
        &:before {
            opacity: 0.8;
            transition-duration: var(--activeAnimationSpeed);
        }
    }

    $variationsMap: (
        "info":    var(--infoColor),
        "success": var(--successColor),
        "danger":  var(--dangerColor),
        "warning": var(--warningColor),
        "hint":    var(--baseAlt4Color),
    );

    // primary styles
    @each $name, $color in $variationsMap {
        &.btn-#{$name} {
            &:before {
                background: $color;
            }
            &:hover,
            &:focus-visible {
                &:before {
                    opacity: 0.8;
                }
            }
            &:active {
                &:before {
                    opacity: 0.7;
                }
            }
        }
    }

    // secondary/bordered styles
    &.btn-outline {
        border: 2px solid currentColor;
        background: #fff;
    }

    @mixin btnOpacity($base: 1, $hover: 1, $active: 1) {
        &:before {
            opacity: $base;
        }
        &:focus-visible,
        &:hover {
            &:before {
                opacity: $hover;
            }
        }
        &.active,
        &:active {
            &:before {
                opacity: $active;
            }
        }
    }

    &.btn-secondary,
    &.btn-transparent,
    &.btn-outline {
        box-shadow: none;
        color: var(--txtPrimaryColor);
        @include btnOpacity(0, 0.3, 0.45);
        &:before {
            background: var(--baseAlt3Color);
        }
        @each $name, $color in $variationsMap {
            &.btn-#{$name} {
                color: $color;
                @include btnOpacity(0, 0.15, 0.25);
                &:before {
                    background: $color;
                }
            }
        }
        &.btn-hint {
            color: var(--txtHintColor);
            &:focus-visible,
            &:hover,
            &:active,
            &.active {
                color: var(--txtPrimaryColor);
            }
        }
    }
    &.btn-secondary {
        @include btnOpacity(0.35, 0.5, 0.7);
        @each $name, $color in $variationsMap {
            &.btn-#{$name} {
                @include btnOpacity(0.15, 0.25, 0.3);
            }
        }
    }

    // disabled state
    &.btn-disabled,
    &[disabled] {
        box-shadow: none;
        cursor: default;
        background: var(--baseAlt1Color);
        color: var(--txtDisabledColor) !important;
        &:before {
            display: none;
        }
        &.btn-transparent {
            background: none;
        }
        &.btn-outline {
            border-color: var(--baseAlt2Color);
        }
    }

    // alignments
    &.txt-left {
        text-align: left;
        justify-content: flex-start;
    }
    &.txt-right {
        text-align: right;
        justify-content: flex-end;
    }

    // sizes
    &.btn-expanded {
        min-width: 150px;
    }
    &.btn-expanded-sm {
        min-width: 90px;
    }
    &.btn-expanded-lg {
        min-width: 170px;
    }
    &.btn-lg {
        column-gap: 10px;
        font-size: var(--lgFontSize);
        min-height: var(--lgBtnHeight);
        min-width: var(--lgBtnHeight);
        padding-left: 30px;
        padding-right: 30px;
        i {
            font-size: 1.2666em;
        }
        &.btn-expanded {
            min-width: 240px;
        }
        &.btn-expanded-sm {
            min-width: 160px;
        }
        &.btn-expanded-lg {
            min-width: 300px;
        }
    }
    &.btn-sm,
    &.btn-xs {
        column-gap: 5px;
        font-size: var(--smFontSize);
        min-height: var(--smBtnHeight);
        min-width: var(--smBtnHeight);
        padding-left: 12px;
        padding-right: 12px;
        i {
            font-size: 1rem;
        }
        &.btn-expanded {
            min-width: 100px;
        }
        &.btn-expanded-sm {
            min-width: 80px;
        }
        &.btn-expanded-lg {
            min-width: 130px;
        }
    }
    &.btn-xs {
        padding-left: 7px;
        padding-right: 7px;
        min-width: var(--xsBtnHeight);
        min-height: var(--xsBtnHeight);
    }
    &.btn-block {
        display: flex;
        width: 100%;
    }

    // pill
    &.btn-pill {
        border-radius: 30px;
    }

    // circle
    &.btn-circle {
        border-radius: 50%;
        padding: 0;
        gap: 0;
        i {
            $iconSize: 19px;
            font-size: 1.2857rem;
            text-align: center;
            width: $iconSize;
            height: $iconSize;
            line-height: $iconSize;
            &:before {
                margin: 0;
                display: block;
            }
        }
        &.btn-sm i {
            font-size: 1.1rem;
        }
        &.btn-xs i {
            font-size: 1.05rem;
        }
    }

    // loading
    &.btn-loading {
        --loaderSize: 24px;

        cursor: default;
        pointer-events: none;
        &:after {
            content: "\eec4";
            position: absolute;
            display: inline-block;
            vertical-align: top;
            left: 50%;
            top: 50%;
            width: var(--loaderSize);
            height: var(--loaderSize);
            line-height: var(--loaderSize);
            font-size: var(--loaderSize);
            color: inherit;
            text-align: center;
            font-weight: normal;
            margin-left: (calc(var(--loaderSize) * -0.5));
            margin-top: (calc(var(--loaderSize) * -0.5));
            font-family: var(--iconFontFamily);
            animation: loaderShow var(--baseAnimationSpeed),
                       rotate 0.9s var(--baseAnimationSpeed) infinite linear;
        }
        & > * {
            opacity: 0;
            transform: scale(0.9);
        }
        &.btn-sm,
        &.btn-xs {
            --loaderSize: 20px;
        }
        &.btn-lg {
            --loaderSize: 28px;
        }
    }

    // interact
    &.btn-prev,
    &.btn-next {
        i {
            transition: transform var(--baseAnimationSpeed);
        }
        &:hover,
        &:focus-within {
            i {
                transform: translateX(3px);
            }
        }
    }
    &.btn-prev {
        &:hover,
        &:focus-within {
            i {
                transform: translateX(-3px);
            }
        }
    }

    // scrolling helpers
    &.btn-horizontal-sticky {
        position: sticky;
        left: var(--xsSpacing);
        right: var(--xsSpacing);
    }
}

.btns-group {
    display: inline-flex;
    align-items: center;
    gap: var(--xsSpacing);
    &.no-gap {
        gap: 0;
        > .btn {
            border-radius: 0;
            box-shadow: -1px 0px 0px 0px rgba(#fff, 0.1);
        }
        > .btn:not(.btn-expanded, .btn-expanded-lg, .btn-expanded-sm) {
            min-width: 0;
        }
        > .btn:first-child {
            border-top-left-radius: var(--btnRadius);
            border-bottom-left-radius: var(--btnRadius);
            box-shadow: none;
        }
        > .btn:last-child {
            border-top-right-radius: var(--btnRadius);
            border-bottom-right-radius: var(--btnRadius);
        }
    }
}

%input {
    display: block;
    width: 100%;
    outline: 0;
    border: 0;
    margin:  0;
    background: none;
    padding: 5px 10px;
    line-height: 20px;
    min-width: 0; // firefox flexbox grow fix
    min-height: var(--inputHeight);
    background: var(--baseAlt1Color);
    color: var(--txtPrimaryColor);
    font-size: var(--baseFontSize);
    font-family: var(--baseFontFamily);
    font-weight: normal;
    border-radius: var(--baseRadius);
    overflow: auto; /* fallback */
    overflow: overlay;
    &::placeholder {
      color: var(--txtDisabledColor);
    }
    &:focus,
    &:focus-within {
        @include scrollbar(
            $thumbColor: var(--baseAlt3Color),
            $thumbActiveColor: var(--baseAlt4Color)
        );
    }
    &[readonly],
    &.readonly {
        cursor: default;
        color: var(--txtHintColor);
    }
    &[disabled],
    &.disabled {
        cursor: default;
        color: var(--txtDisabledColor);
    }
    &.txt-mono {
        line-height: var(--smLineHeight);
    }
    &.code {
        font-size: 15px;
        line-height: 1.379rem;
        font-family: var(--monospaceFontFamily);
    }
}


input,
select,
textarea {
    @extend %input;
}
input {
    // Safari and GNOME Web has a default height and ignores the min-height
    height: var(--inputHeight);
}
input[list]::-webkit-calendar-picker-indicator {
    display: none !important; // hide the default list input arrow
}
input:-webkit-autofill {
    -webkit-text-fill-color: var(--txtPrimaryColor);
    -webkit-box-shadow: inset 0 0 0 50px var(--baseAlt1Color);
}
.form-field:focus-within input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 50px var(--baseAlt2Color);
}
input[type="file"] {
    padding: 9px;
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
    display: inline;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
textarea {
    min-height: 80px;
    resize: vertical;
}
select {
    padding-left: 8px;
}

.form-field {
    --hPadding: 15px;

    position: relative;
    display: block;
    width: 100%;
    margin-bottom: var(--baseSpacing);
    %input {
        z-index: 0;
        padding-left: var(--hPadding);
        padding-right: var(--hPadding);
    }
    .active:has(.dropdown) > %input {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .toggler-container .dropdown {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
    }
    select {
        padding-left: 8px;
    }
    label {
        display: flex;
        width: 100%;
        column-gap: 5px;
        align-items: center;
        user-select: none;
        font-weight: 600;
        font-size: var(--smFontSize);
        letter-spacing: 0.1px;
        color: var(--txtHintColor);
        line-height: 1;
        padding-top: 12px;
        padding-bottom: 3px;
        padding-left: var(--hPadding);
        padding-right: var(--hPadding);
        border: 0;
        border-top-left-radius: var(--baseRadius);
        border-top-right-radius: var(--baseRadius);
        & ~ %input,
        & ~ div > %input {
            border-top: 0;
            padding-top: 2px;
            padding-bottom: 8px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        i {
            font-size: 0.96rem;
            margin-bottom: -1px;
            &:before {
                margin: 0;
            }
        }
    }
    %input, label {
        background: var(--baseAlt1Color);
        transition: color var(--baseAnimationSpeed),
                    background var(--baseAnimationSpeed),
                    box-shadow var(--baseAnimationSpeed);
    }
    &:focus-within:not(.form-field-list) {
        %input, label {
            background: var(--baseAlt2Color);
        }
        label {
            color: var(--txtPrimaryColor);
        }
    }

    // addon
    .form-field-addon {
        position: absolute;
        display: inline-flex;
        align-items: center;
        z-index: 1;
        top: 0px;
        right: var(--hPadding);
        min-height: var(--inputHeight);
        color: var(--txtHintColor);
        .btn {
            margin-right: -5px;
        }
        &:not(.prefix) ~ %input {
            padding-right: 45px;
        }
        &.prefix {
            right: auto;
            left: var(--hPadding);
            & ~ %input {
                padding-left: 45px;
            }
        }
    }
    label ~ .form-field-addon {
        min-height: calc(26px + var(--inputHeight));
    }

    // hints
    .help-block {
        @extend .content;
        position: relative;
        margin-top: 8px;
        font-size: var(--smFontSize);
        line-height: var(--smLineHeight);
        color: var(--txtHintColor);
        word-break: break-word;
        pre {
            white-space: pre-wrap;
        }
    }
    .help-block-error {
        color: var(--dangerColor);
    }

    // states
    &.error,
    &.invalid {
        > label {
            color: var(--dangerColor);
        }
    }
    &.invalid {
        label, %input {
            background: var(--dangerAltColor);
        }
    }
    &.required:not(.form-field-toggle) {
        > label:after {
            content: '*';
            color: var(--dangerColor);
            margin-top: -2px;
            margin-left: -2px;
        }
    }
    &.readonly,
    &.disabled {
        label, %input {
            background: var(--baseAlt1Color);
        }
        > label {
            color: var(--txtHintColor);
        }
        &.required > label:after {
            opacity: 0.5;
        }
    }
    &.disabled {
        label, %input {
            box-shadow: inset 0 0 0 var(--btnHeight) rgba(#fff, 0.45);
        }
        > label {
            color: var(--txtDisabledColor);
        }
    }

    // checkbox/radio
    input[type="radio"],
    input[type="checkbox"] {
        $size: 20px;
        position: absolute;
        z-index: -1;
        left: 0;
        width: 0;
        height: 0;
        min-height: 0;
        min-width: 0;
        border: 0;
        background: none;
        user-select: none;
        pointer-events: none;
        box-shadow: none;
        opacity: 0;
        ~ label {
            border: 0;
            margin: 0;
            outline: 0;
            background: none !important;
            display: inline-flex;
            vertical-align: top;
            align-items: center;
            width: auto;
            column-gap: 5px;
            user-select: none;
            padding: 0 0 0 ($size + 7px);
            line-height: $size;
            min-height: $size;
            font-weight: normal;
            font-size: var(--baseFontSize);
            text-transform: none;
            color: var(--txtPrimaryColor);
            &:before {
                content: '';
                display: inline-block;
                vertical-align: top;
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                width: $size;
                height: $size;
                line-height: $size - 4;
                font-family: var(--iconFontFamily);
                font-size: 1.2rem;
                text-align: center;
                color: var(--baseColor);
                cursor: pointer;
                background: var(--baseColor);
                border-radius: var(--baseRadius);
                border: 2px solid var(--baseAlt3Color);
                transition: transform var(--baseAnimationSpeed),
                            border-color var(--baseAnimationSpeed),
                            color var(--baseAnimationSpeed),
                            background var(--baseAnimationSpeed);
            }
            &:active:before {
                transform: scale(0.9);
            }
        }
        &:focus ~ label,
        & ~ label:hover {
            &:before {
                border-color: var(--baseAlt4Color);
            }
        }
        &:checked ~ label {
            &:before {
                content: '\eb7a';
                box-shadow: none;
                mix-blend-mode: unset;
                background: var(--successColor);
                border-color: var(--successColor);
            }
        }
        &:disabled ~ label {
            pointer-events: none;
            cursor: not-allowed;
            color: var(--txtDisabledColor);
            &:before {
                opacity: 0.5;
            }
        }
    }
    input[type="radio"] {
        & ~ label:before {
            border-radius: 50%;
            font-size: 1rem;
        }
    }

    .form-field-block {
        @extend %block;
        position: relative;
        margin: 0 0 var(--xsSpacing);
        &:last-child {
            margin-bottom: 0;
        }
    }

    // toggle
    &.form-field-toggle {
        @mixin toggleSize($toggleWidth: 40px, $toggleHeight: 24px) {
            $toggleSize: $toggleHeight - 8;
            $toggleOffset: ($toggleHeight - $toggleSize) * 0.5;
            input[type="radio"],
            input[type="checkbox"] {
                & ~ label {
                    min-height: $toggleHeight;
                    padding-left: $toggleWidth + 7px;
                    &:empty {
                        padding-left: $toggleWidth;
                    }
                    &:before {
                        width: $toggleWidth;
                        height: $toggleHeight;
                        border-radius: $toggleHeight;
                    }
                    &:after {
                        top: $toggleOffset;
                        left: $toggleOffset;
                        width: $toggleSize;
                        height: $toggleSize;
                        border-radius: $toggleSize;
                    }
                }
                &:checked ~ label {
                    &:after {
                        left: $toggleWidth - $toggleSize - $toggleOffset;
                    }
                }
            }
        }

        .form-field-addon {
            position: relative;
            right: auto;
            left: auto;
            top: auto;
            bottom: auto;
            min-height: 0;
            vertical-align: middle;
            margin-left: 5px;
        }

        input[type="radio"],
        input[type="checkbox"] {
            & ~ label {
                position: relative;
                &:before {
                    content: '';
                    border: 0;
                    box-shadow: none;
                    background: var(--baseAlt3Color);
                    transition: background var(--activeAnimationSpeed);
                }
                &:after {
                    content: '';
                    position: absolute;
                    z-index: 1;
                    cursor: pointer;
                    background: var(--baseColor);
                    transition: left var(--activeAnimationSpeed),
                                transform var(--activeAnimationSpeed),
                                background var(--activeAnimationSpeed);
                    @include shadowize();
                }
                &:active:before {
                    transform: none;
                }
                &:active:after {
                    transform: scale(0.9);
                }
            }
            &:focus-visible ~ label {
                &:before {
                    box-shadow: 0 0 0 2px var(--baseAlt2Color);
                }
            }
            & ~ label:hover {
                &:before {
                    background: var(--baseAlt4Color);
                }
            }
            &:checked ~ label {
                &:before {
                    background: var(--successColor);
                }
                &:after {
                    background: var(--baseColor);
                }
            }
        }

        @include toggleSize(40px, 24px);

        &.form-field-sm {
            @include toggleSize(32px, 20px);
        }
    }
}

.form-field-group {
    display: flex;
    width: 100%;
    align-items: center;
    > .form-field {
        flex-grow: 1;
        border-left: 1px solid var(--baseAlt2Color);
        &:first-child {
            border-left: 0;
        }
        &:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            > label,
            > %input,
            > .select .selected-container {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        &:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            > label,
            > %input,
            > .select .selected-container {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
    }
    @for $i from 12 through 1 {
        .form-field.col-#{$i} {
            width: math.div(100%, math.div(12, $i));
        }
    }
}

.form-field-inline {
    display: flex;
    width: 100%;
    align-items: stretch;
    > label {
        height: auto;
        width: auto;
        margin: 0;
        padding: 0 5px 0 10px;
        padding-bottom: 0;
        white-space: nowrap;
        border-top-left-radius: var(--baseRadius);
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--baseRadius);
        border-bottom-right-radius: 0;
        ~ input {
            padding-left: 5px;
            padding-top: 0;
            padding-bottom: 0;
            border-top-left-radius: 0;
            border-top-right-radius: var(--baseRadius);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: var(--baseRadius);
        }
    }
}

// select field
.select {
    position: relative;
    display: block;
    outline: 0;
    .option {
        user-select: none;
        column-gap: 5px;
        .icon {
            min-width: 20px;
            text-align: center;
            line-height: inherit;
            i {
                vertical-align: middle;
                line-height: inherit;
            }
        }
    }

    // selected
    .txt-placeholder {
        color: var(--txtHintColor);
    }
    label ~ & .selected-container {
        border-top: 0;
    }
    .selected-container {
        @extend %input;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 35px !important;
        user-select: none;
        &:after {
            $size: 20px;
            content: "\ea4d";
            position: absolute;
            right: 5px;
            top: 50%;
            width: $size;
            height: $size;
            line-height: $size;
            text-align: center;
            margin-top: -($size * 0.5);
            display: inline-block;
            vertical-align: top;
            font-size: 1rem;
            font-family: var(--iconFontFamily);
            align-self: flex-end;
            color: var(--txtHintColor);
            transition: color var(--baseAnimationSpeed),
                        transform var(--baseAnimationSpeed);
        }
        &:active,
        &.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            &:after {
                color: var(--txtPrimaryColor);
                transform: rotate(180deg);
            }
        }
        .option {
            display: flex;
            width: 100%;
            align-items: center;
            max-width: 100%;
            user-select: text;
        }
        .clear {
            margin-left: auto;
            cursor: pointer;
            color: var(--txtHintColor);
            transition: color var(--baseAnimationSpeed);
            i {
                display: inline-block;
                vertical-align: middle;
                line-height: 1;
            }
            &:hover {
                color: var(--txtPrimaryColor);
            }
        }
    }
    &.multiple .selected-container {
        display: flex;
        align-items: center;
        padding-left: 2px;
        row-gap: 3px;
        column-gap: 4px;
        .txt-placeholder {
            margin-left: 5px;
        }
        .option {
            display: inline-flex;
            width: auto;
            padding: 3px 5px;
            line-height: 1;
            border-radius: var(--baseRadius);
            background: var(--baseColor);
        }
    }
    &:not(.multiple) .selected-container {
        .label {
            margin-left: -2px;
        }
        .option .txt {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
            line-height: normal;
        }
    }
    &:not(.disabled) .selected-container:hover {
        cursor: pointer;
    }
    &.readonly,
    &.disabled {
        color: var(--txtHintColor);
        pointer-events: none;
        .txt-placeholder {
            color: inherit;
        }
        .selected-container {
            color: inherit;
            .link-hint {
                pointer-events: auto;
            }
            *:not(.link-hint) {
                color: inherit !important;
            }
            &:after,
            .clear {
                display: none;
            }
            &:hover {
                cursor: inherit;
            }
        }
    }
    &.disabled {
        color: var(--txtDisabledColor);
    }

    // dropdown
    .txt-missing {
        @extend %block;
        color: var(--txtHintColor);
        padding: 5px 12px;
        margin: 0;
    }
    .options-dropdown {
        max-height: none;
        border: 0;
        overflow: auto;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: -2px;
        @include shadowize(inset 0 0 0 2px var(--baseAlt2Color));
        .input-group:focus-within {
            box-shadow: none;
        }
        .form-field.options-search {
            margin: 0px 0 5px;
            padding: 0 0 2px;
            color: var(--txtHintColor);
            border-bottom: 1px solid var(--baseAlt2Color);
            .input-group {
                border-radius: 0;
                padding: 0 0 0 10px;
                margin: 0;
                background: none;
                column-gap: 0;
                border: 0;
            }
            input {
                border: 0;
                padding-left: 9px;
                padding-right: 9px;
                background: none;
            }
        }
        .options-list {
            overflow: auto;
            max-height: 240px;
            width: auto;
            margin-left: 0;
            margin-right: -5px;
            padding-right: 5px;
        }
    }
    .options-list:not(:empty) ~ [slot="afterOptions"]:not(:empty) {
        margin: 5px -5px -5px;
        .btn-block {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--baseRadius);
            border-bottom-right-radius: var(--baseRadius);
        }
    }

    // with label
    label ~ & {
        .selected-container {
            padding-bottom: 4px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        &.multiple .selected-container {
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 10px;
        }
    }

    // block/full-width options style
    &.block-options {
        &.multiple .selected-container {
            .option {
                width: 100%;
                @include shadowize();
            }
        }
    }

    &.upside {
        .selected-container.active {
            border-radius: 0 0 var(--baseRadius) var(--baseRadius);
        }
        .options-dropdown {
            border-radius: var(--baseRadius) var(--baseRadius) 0 0;
            margin: 0;
        }
    }
}

.field-type-select {
    .options-dropdown {
        padding: 2px 1px 1px 2px;
        .form-field.options-search {
            margin: 0;
        }
        .options-list {
            max-height: 490px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            padding: 0;
        }
        .dropdown-item {
            width: 50%;
            margin: 0;
            padding-left: 12px; // visual align with the label
            border-radius: 0;
            border-bottom: 1px solid var(--baseAlt2Color);
            border-right: 1px solid var(--baseAlt2Color);
            &.selected {
                background: var(--baseAlt1Color);
            }
        }
    }
}

.form-field-list {
    border-radius: var(--baseRadius);
    transition: box-shadow var(--baseAnimationSpeed);
    > label {
        padding-bottom: 10px;
    }
    .list {
        background: var(--baseAlt1Color);
        border: 0;
        border-radius: 0;
        border-bottom-left-radius: var(--baseRadius);
        border-bottom-right-radius: var(--baseRadius);
        transition: background var(--baseAnimationSpeed);
        .list-item {
            border-top: 1px solid var(--baseAlt2Color);
            &:hover,
            &:focus,
            &:focus-within,
            &:focus-visible,
            &:active {
                background: none;
            }
            &.selected {
                background: var(--baseAlt2Color);
            }
            &.handle:not(.disabled) {
                &:hover,
                &:focus-visible {
                    background: var(--baseAlt2Color);
                }
                &:active {
                    background: var(--baseAlt3Color);
                }
            }
            &.dragging {
                z-index: 9;
                box-shadow: inset 0 0 0 1px var(--baseAlt3Color);
            }
            &.dragover {
                background: var(--baseAlt2Color);
            }
        }
    }
    &:focus-within {
        .list, %input:not(:focus), > label {
            background: var(--baseAlt1Color);
        }
        > label {
            color: var(--txtPrimaryColor);
        }
    }
    &.dragover:not(:has(.dragging)) {
        box-shadow: 0px 0px 0px 2px var(--warningColor);
    }
}

// codemirror field
.code-editor {
    @extend %input;
    display: flex;
    flex-direction: column;
    width: 100%;
    .form-field label ~ & {
        padding-bottom: 6px;
        padding-top: 4px;
    }
    .cm-editor {
        flex-grow: 1;
        border: 0 !important;
        outline: none !important;
        .cm-line {
            padding-left: 0;
            padding-right: 0;
        }
        .cm-tooltip-autocomplete {
            @include shadowize();
            border-radius: var(--baseRadius);
            background: var(--baseColor);
            border: 0;
            z-index: 9999;
            padding: 0 3px;
            font-size: 0.92rem;
            ul {
                margin: 0;
                border-radius: inherit;
                > :first-child {
                    border-top-left-radius: inherit;
                    border-top-right-radius: inherit;
                }
                > :last-child {
                    border-bottom-left-radius: inherit;
                    border-bottom-right-radius: inherit;
                }
            }
            ul li[aria-selected] {
                background: var(--infoColor);
            }
        }
        .cm-scroller {
            flex-grow: 1;
            outline: 0 !important;
            font-family: var(--monospaceFontFamily);
            font-size: var(--baseFontSize);
            line-height: var(--baseLineHeight);
        }
        .cm-cursorLayer {
            .cm-cursor {
                margin-left: 0 !important;
            }
        }
        .cm-placeholder {
            color: var(--txtDisabledColor);
            font-family: var(--monospaceFontFamily);
            font-size: var(--baseFontSize);
            line-height: var(--baseLineHeight);
        }
        .cm-selectionMatch {
            background: var(--infoAltColor);
        }
        &.cm-focused .cm-matchingBracket {
            background-color: rgba(50, 140, 130, 0.1);
        }
    }
    .ͼf {
        color: var(--dangerColor);
    }
}

// tinymce field
.tinymce-wrapper {
    @extend %input;
    min-height: 277px;
    .tox-tinymce {
        border-radius: var(--baseRadius);
        border: 0;
    }
    .form-field label ~ & {
        position: relative;
        z-index: auto; // reset default z-index
        padding: 5px 2px 2px 2px;
        // blank placeholder
        &:before {
            content: '';
            position: absolute;
            z-index: -1;
            top: 5px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background: #fff;
            border-radius: var(--baseRadius);
        }
    }
}
body {
    .tox .tox-dialog {
        border: 0;
        border-radius: var(--baseRadius);
    }
    .tox .tox-dialog-wrap__backdrop {
        background: var(--overlayColor);
    }
    .tox .tox-tbtn {
        height: 30px;
        svg {
            transform: scale(0.85);
        }
    }
    .tox .tox-collection__item-checkmark,
    .tox .tox-collection__item-icon {
        width: 22px;
        height: 22px;
        transform: scale(0.85);
    }
    .tox .tox-tbtn:not(.tox-tbtn--select) {
        width: 30px;
    }
    .tox .tox-button,
    .tox .tox-button--secondary {
        font-size: var(--smFontSize);
    }
    .tox .tox-toolbar-overlord {
        @include shadowize();
    }
    .tox .tox-listboxfield .tox-listbox--select,
    .tox .tox-textarea, .tox .tox-textfield,
    .tox .tox-toolbar-textfield {
        padding: 3px 5px;
    }
    .tox-swatch:not(.tox-swatch--remove):not(.tox-collection__item--enabled) {
        svg {
            display: none;
        }
    }
    .tox .tox-textarea-wrap {
        display: flex;
        flex: 1;
    }
    &.tox-fullscreen {
        .overlay-panel-section {
            overflow: hidden;
        }
    }
}