.ax-machine-switch {
--ax-machine-danger: #ff4d4d;
--ax-machine-success: #38d67a;
--ax-machine-plate: color-mix(in srgb, var(--ax-surface-2) 86%, #2b211a);
--ax-machine-gap: 0.32rem;
position: relative;
display: inline-grid;
grid-template-areas:
'controls controls'
'label state';
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.62rem 0.8rem;
min-width: 11.6rem;
min-height: 5.4rem;
padding: 0.9rem 1rem 0.72rem;
border: 1px solid var(--ax-border-strong);
border-radius: 1.05rem;
background:
radial-gradient(circle at 11% 14%, rgba(255, 255, 255, 0.15) 0 0.12rem, transparent 0.14rem),
radial-gradient(circle at 89% 14%, rgba(255, 255, 255, 0.15) 0 0.12rem, transparent 0.14rem),
radial-gradient(circle at 11% 86%, rgba(0, 0, 0, 0.46) 0 0.13rem, transparent 0.15rem),
radial-gradient(circle at 89% 86%, rgba(0, 0, 0, 0.46) 0 0.13rem, transparent 0.15rem),
linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--ax-machine-plate) 90%, white), color-mix(in srgb, var(--ax-machine-plate) 84%, black));
color: var(--ax-text);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--ax-border-strong) 44%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -2px 0 rgba(0, 0, 0, 0.4),
0 18px 42px rgba(0, 0, 0, 0.32);
cursor: pointer;
user-select: none;
}
.ax-machine-switch::before {
content: '';
position: absolute;
inset: 0.46rem;
border: 1px solid color-mix(in srgb, var(--ax-border-strong) 58%, transparent);
border-radius: 0.72rem;
pointer-events: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.ax-machine-switch:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.ax-machine-switch__controls {
grid-area: controls;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ax-machine-gap);
padding: 0.38rem;
border: 1px solid color-mix(in srgb, var(--ax-border) 74%, black);
border-radius: 0.78rem;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.44), rgba(255, 255, 255, 0.035)),
color-mix(in srgb, var(--ax-bg) 74%, black);
box-shadow:
inset 0 3px 12px rgba(0, 0, 0, 0.72),
inset 0 0 0 1px rgba(255, 255, 255, 0.035),
0 1px 0 rgba(255, 255, 255, 0.05);
}
.ax-machine-switch__controls::before {
content: '';
position: absolute;
inset: 0.34rem calc(50% - 0.5px);
width: 1px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.62);
box-shadow: 1px 0 rgba(255, 255, 255, 0.06);
}
.ax-machine-switch__pad {
position: relative;
display: grid;
place-items: center;
min-width: 4.3rem;
min-height: 2.35rem;
padding: 0.55rem 0.7rem;
border: 1px solid color-mix(in srgb, currentColor 30%, black);
border-radius: 0.55rem;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
linear-gradient(180deg, color-mix(in srgb, var(--ax-surface) 78%, #303030), color-mix(in srgb, var(--ax-surface-2) 72%, black));
color: var(--ax-text-muted);
font-size: 0.75rem;
font-weight: 950;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
transform: translateY(-0.16rem) scale(1.035);
box-shadow:
0 0.24rem 0 rgba(0, 0, 0, 0.58),
0 0.45rem 0.85rem rgba(0, 0, 0, 0.34),
inset 0 1px rgba(255, 255, 255, 0.18),
inset 0 -2px rgba(0, 0, 0, 0.34);
transition:
transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
color 0.16s ease,
background 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease;
}
.ax-machine-switch__pad::after {
content: '';
position: absolute;
inset: 0.32rem;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0.36rem;
pointer-events: none;
}
.ax-machine-switch__pad[data-tone='danger'] {
color: color-mix(in srgb, var(--ax-machine-danger) 48%, var(--ax-text-muted));
}
.ax-machine-switch__pad[data-tone='success'] {
color: color-mix(in srgb, var(--ax-machine-success) 44%, var(--ax-text-muted));
}
.ax-machine-switch__pad[data-active='true'] {
color: white;
transform: translateY(0.08rem) scale(0.985);
box-shadow:
0 0 20px color-mix(in srgb, currentColor 34%, transparent),
0 0 42px color-mix(in srgb, currentColor 18%, transparent),
inset 0 2px 8px rgba(0, 0, 0, 0.38),
inset 0 -1px rgba(255, 255, 255, 0.2);
}
.ax-machine-switch__pad[data-tone='danger'][data-active='true'] {
border-color: color-mix(in srgb, var(--ax-machine-danger) 62%, black);
background:
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
linear-gradient(180deg, color-mix(in srgb, var(--ax-machine-danger) 86%, white), color-mix(in srgb, var(--ax-machine-danger) 70%, black));
text-shadow: 0 0 10px rgba(255, 77, 77, 0.86);
}
.ax-machine-switch__pad[data-tone='success'][data-active='true'] {
border-color: color-mix(in srgb, var(--ax-machine-success) 62%, black);
background:
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.25), transparent 28%),
linear-gradient(180deg, color-mix(in srgb, var(--ax-machine-success) 84%, white), color-mix(in srgb, var(--ax-machine-success) 68%, black));
text-shadow: 0 0 10px rgba(56, 214, 122, 0.86);
}
.ax-machine-switch:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ax-primary) 74%, white);
outline-offset: 3px;
}
.ax-machine-switch__label {
position: relative;
z-index: 1;
color: var(--ax-text-muted);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
line-height: 1.1;
text-transform: uppercase;
}
.ax-machine-switch__label:not([data-state]) {
grid-area: label;
justify-self: start;
}
.ax-machine-switch__label[data-state] {
grid-area: state;
justify-self: end;
color: var(--ax-text);
}