// stylelint-disable property-no-vendor-prefix
@mixin ym-appearance-none {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

@mixin ym-number-as-text-inout {

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    -moz-appearance: textfield;
}

// stylelint-enable property-no-vendor-prefix

// Hidding scrollbar
@mixin ym-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
}

// Hidding scrollbar
@mixin ym-custom-scrollbar {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    scrollbar-width: 12px;

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 40px;
        transition: width 0.15s;
    }
}

@mixin ym-kbd {
    display: inline-flex;
    box-sizing: border-box;
    font-family: var(--ym-monospace-font);
    white-space: nowrap;
    user-select: none;
    font-size: var(--ym-font-size);
    min-width: var(--ym-spacing-scale-6);
    line-height: var(--ym-line-height-20);
    padding-left: var(--ym-spacing-scale-3);
    padding-right: var(--ym-spacing-scale-3);
    border-radius: var(--ym-border-radius-2);
    color: var(--ym-text-gray-700);
    background-color: var(--ym-bg-t-gray-a-08);
    box-shadow: inset 0 -1px 0 0 rgba(var(--ym-bg-gray-900), 0.08);
}

@mixin ym-blockquote {
    @include ym-text-gray-700;
    @include ym-py-3;
    @include ym-pl-6;
    @include ym-my-3;
    @include ym-mx-0;
    @include ym-inset-border-l-4-gray-100;
}

// Dropdowns
@mixin ym-dropdown-width {
    width: 100%;
    max-width: var(--ym-dropdown-width);
}

@mixin ym-dropdown-width-narrow {
    width: 100%;
    max-width: var(--ym-dropdown-width-narrow);
}

@mixin ym-dropdown-width-wide {
    width: 100%;
    max-width: var(--ym-dropdown-width-wide);
}

@mixin ym-max-dropdown-max-height {
    height: 100%;
    max-height: var(--ym-max-dropdown-max-height);
}

// Toast messages
@mixin ym-toast-min-width {
    min-width: var(--ym-toast-min-width);
}

@mixin ym-toast-max-width {
    width: 100%;
    max-width: var(--ym-toast-max-width);
}

// Modal widths
@mixin ym-modal-small-width {
    width: 100%;
    max-width: var(--ym-modal-small-width);
}

@mixin ym-modal-base-width {
    width: 100%;
    max-width: var(--ym-modal-base-width);
}

@mixin ym-modal-large-width {
    width: 100%;
    max-width: var(--ym-modal-large-width);
}

@mixin ym-modal-extra-large-width {
    width: 100%;
    max-width: var(--ym-modal-extra-large-width);
}

@mixin ym-backdrop-bg {
    background-color: var(--ym-backdrop-bg);
}

@mixin ym-backdrop-opacity {
    opacity: var(--ym-backdrop-opacity);
}

// Drawer widths
@mixin ym-drawer-small-width {
    width: 100%;
    max-width: var(--ym-drawer-small-width);
}

@mixin ym-drawer-base-width {
    width: 100%;
    max-width: var(--ym-drawer-base-width);
}

@mixin ym-drawer-large-width {
    width: 100%;
    max-width: var(--ym-drawer-large-width);
}

@mixin ym-backdrop-bg {
    background-color: var(--ym-backdrop-bg);
}

@mixin ym-backdrop-opacity {
    opacity: var(--ym-backdrop-opacity);
}