import { css } from 'styled-components';

export const switcherDarkMode = css`
    --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
    --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
    --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
    --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
    --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
    --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
    --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
    --switch-width: 32px; // @presenter Width
    --switch-height: 18px; // @presenter Height
    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
    --switch-bg-transition: background-color 0.3s; // @presenter Transition
    --switch-knob-height: 14px; // @presenter Height
    --switch-knob-width: 14px; // @presenter Width
    --switch-knob-transition: all 0.3s; // @presenter Transition
`;