* {
    box-sizing: border-box;
}

@mixin input-sizes-presets {
    &[data-height="tiny"] {
        height: calc(1rem - var(--slotui-border-bottom-size, 2px));
        padding: 0;
    }
    &[data-height="small"] {
        height: calc(1.9rem - var(--slotui-border-bottom-size, 2px));
    }
    &[data-height="default"] {
        height: calc(2.5rem - var(--slotui-border-bottom-size, 2px));
    }
    &[data-height="large"] {
        height: calc(4rem - var(--slotui-border-bottom-size, 2px));
    }

    &[borderless="true"] {
        border: 0px solid none;
    }
}

@mixin ui-width-presets {
    &[data-width="tiny"] {
        width: 2rem;
    }
    &[data-width="small"] {
        width: 6rem;
    }
    &[data-width="medium"] {
        width: 8rem;
    }
    &[data-width="default"] {
        width: 12rem;
    }
    &[data-width="large"] {
        width: 16rem;
    }
    &[data-width="full"] {
        width: 100%;
    }
    &[data-width="auto"] {
        width: auto;
    }
}

@mixin ui-density-presets {
    &.density-none,
    &[data-density="none"] {
        padding: 0;
    }
    &.density-tight,
    &[data-density="tight"] {
        padding: 0.5rem 0;
    }
    &.density-small,
    &[data-density="small"] {
        padding: 0.75rem 0;
    }
    &.density-default,
    &[data-density="default"] {
        padding: 1rem 0;
    }
    &.density-kind,
    &[data-density="kind"] {
        padding: 1.5rem 0;
    }
    &.density-unset,
    &[data-density="unset"] {
        padding: auto;
    }
}

@mixin data-hover {
    &:hover {
        border-color:   var(--theme-color-foreground-alpha-high);
        background-color: var(--theme-color-secondary-alpha);
    }
}

@mixin data-selected {
    &.selected, &[data-selected="true"] {
        border-color:   var(--theme-color-primary);
        background-color: var(--theme-color-primary-alpha-high);
        box-shadow: var(--slotui-listitem-active-boxshadow, var(shad-3));
    }
}