@equinor/eds-core-react/dist/esm/components/Switch/Switch.styles.js

The React implementation of the Equinor Design System

import styled, { css } from 'styled-components';
import { outlineTemplate } from '@equinor/eds-utils';

const BaseInputWrapper = styled.span.withConfig({
  displayName: "Switchstyles__BaseInputWrapper",
  componentId: "sc-x39lde-0"
})(({
  theme: {
    width,
    height
  }
}) => css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;"], width, height));
const BaseInput = styled.input.attrs(({
  type = 'checkbox'
}) => ({
  type
})).withConfig({
  displayName: "Switchstyles__BaseInput",
  componentId: "sc-x39lde-1"
})(({
  disabled,
  theme
}) => css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;position:relative;z-index:1;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline)));
const GridWrapper = styled.span.withConfig({
  displayName: "Switchstyles__GridWrapper",
  componentId: "sc-x39lde-2"
})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;isolation:isolate;"]);

export { BaseInput, BaseInputWrapper, GridWrapper };