@universal-material/web/radio/radio.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);
    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
    display: inline-block;
    vertical-align: middle;
  }

  .container {
    cursor: pointer;
    position: relative;
    width: var(--_width);
    height: var(--_height);
    padding: var(--_state-layer-padding);
    border-radius: var(--u-shape-corner-full, 9999px);
  }

  :host([hide-state-layer]) .container {
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    padding: 0;
  }
  :host([hide-state-layer]) u-ripple {
    display: none;
  }

  input {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: inherit;
    appearance: none;
  }

  u-ripple {
    padding: var(--_state-layer-padding);
  }

  .indicator-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    pointer-events: none;
  }

  input:checked ~ .indicator-container {
    --_indicator-color: var(--u-radio-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  :host([disabled]) {
    opacity: var(--u-radio-disabled-state-opacity, 0.38);
  }
  :host([disabled]) input,
  :host([disabled]) .container {
    cursor: default;
  }
  :host([disabled]) .indicator-container {
    --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
  }

  :host {
    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);
    --_width: var(--u-radio-size, 3rem);
    --_height: var(--_width);
  }

  .indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);
    border-radius: 50%;
  }
  .indicator::before {
    content: "";
    width: calc(var(--_indicator-size) / 2);
    height: calc(var(--_indicator-size) / 2);
    background: var(--_indicator-color);
    border-radius: 50%;
    transition: transform 250ms;
    transform: scale3d(0, 0, 1);
  }

  input:checked ~ .indicator-container .indicator::before {
    transform: scale3d(1, 1, 1);
  }
`;
//# sourceMappingURL=radio.styles.js.map