@import 'commons';

@mixin m-chip-base-style() {
    transition: background $m-transition-duration ease, color $m-transition-duration ease, border-color $m-transition-duration ease;
    padding: calc(#{$m-space-xs} + #{$m-space-2xs} / 2) $m-space;
    border-radius: 25px;
    outline-color: $m-color-interactive;
    user-select: none;
    appearance: none;
    height: 42px; // Magic number: chip height;
}

@mixin m-chip-small-style() {
    padding: calc((#{$m-space-xs} + #{$m-space-2xs} / 2) / 2) 3px calc((#{$m-space-xs} + #{$m-space-2xs} / 2) / 2) 7px; // Magic number: padding-side
    border-radius: 12px;
    height: 20px; // Magic number: chip height;
}

@mixin m-chip-body-style() {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}