src/components/Toggle/Toggle.module.scss
@import '../global.module';
.this {
--text-color-primary: var(--colour-neutral-lightest);
--text-color-secondary: var(--colour-primary-darkest);
--text-color-tertiary: var(--colour-neutral-darkest);
--text-color-danger: var(--colour-danger-darkest);
--background-color-primary: var(--colour-primary-darkest);
--background-color-secondary: var(--colour-neutral-lightest);
--background-color-tertiary: var(--colour-neutral-lightest);
--background-color-danger: var(--colour-neutral-lightest);
--border-color-primary: var(--colour-primary-darkest);
--border-color-secondary: var(--colour-primary-dark);
--border-color-tertiary: var(--colour-neutral-dark);
--border-color-danger: var(--colour-danger-dark);
--border-hover-color-primary: var(--colour-neutral-darkest);
--border-hover-color-secondary: var(--colour-primary-darkest);
--border-hover-color-tertiary: var(--colour-neutral-darkest);
--border-hover-color-danger: var(--colour-danger-darkest);
display: inline-flex;
}
.inner {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
grid-gap: var(--size-2);
outline-offset: var(--border-width-thinner);
outline: transparent solid var(--border-width-thinner);
transition: box-shadow var(--transition-ease-in-slow), border var(--transition-ease-in-fast);
border-radius: var(--border-radius-roundest);
border-width: var(--border-width-thinner);
border-style: solid;
border-color: transparent;
&:focus-within {
outline: var(--colour-secondary-dark) solid var(--border-width-thinner);
transition: box-shadow var(--transition-ease-out-slow), border var(--transition-ease-in-fast);
box-shadow: var(--elevation-higher);
}
&:hover,
&:focus {
cursor: pointer;
box-shadow: var(--elevation-higher);
}
&.toggled {
transition: border var(--transition-ease-out-fast);
}
@each $level in $levels {
&.level-#{$level} {
color: var(--text-color-#{$level});
background-color: var(--background-color-#{$level});
border-color: var(--border-color-#{$level});
&.toggled {
border-color: var(--border-hover-color-#{$level});
}
}
}
}
.disabled {
opacity: 0.75;
.inner:hover {
cursor: not-allowed;
}
}
.checkbox {
position: absolute;
left: 0;
top: 0;
margin: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}