/* src/components/swatch/src/components/swatch/styles.module.css */
@layer ddsweb-organisms {
  @layer ddsweb-one-tile {
    .b74ac0_o7KQoq_swatchBaselayer {
      --ddsweb-swatch-container-area: 40px;
      --ddsweb-swatch-border-color: transparent;
      --ddsweb-swatch-hover-border-color: var(--ddsweb-swatch-border-color);
      --ddsweb-swatch-tesco-blue: var(--ddsweb-theme-colors-tesco-blue);
      box-sizing: border-box;
      width: var(--ddsweb-swatch-container-area);
      height: var(--ddsweb-swatch-container-area);
      border-style: solid;
      border-width: 3px;
      border-color: var(--ddsweb-swatch-border-color);
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      display: flex;
      position: relative;
    }
    .b74ac0_o7KQoq_swatchBaselayerSm {
      --ddsweb-swatch-container-area: 30px;
      border-width: var(--ddsweb-theme-spacing-xxx);
    }
    .b74ac0_o7KQoq_swatchBaselayerHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .b74ac0_o7KQoq_swatchBaselayer:active,
    .b74ac0_o7KQoq_swatchBaselayer:focus .b74ac0_o7KQoq_swatchBaselayer:focus-visible {
      border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .b74ac0_o7KQoq_swatchBaselayer:hover {
      border-color: var(--ddsweb-swatch-hover-border-color);
    }
    .b74ac0_o7KQoq_slantedLine {
      --ddsweb-swatch-out-of-stock-color: var(--ddsweb-theme-colors-grayscale);
      --ddsweb-swatch-hover-border-color: var(--ddsweb-swatch-out-of-stock-color);
      --ddsweb-swatch-tesco-blue: var(--ddsweb-theme-colors-tesco-blue);
      background:
        linear-gradient(
          to left bottom,
          transparent 45%,
          white 46%,
          white 49%,
          var(--ddsweb-swatch-out-of-stock-color) 50%,
          var(--ddsweb-swatch-out-of-stock-color) 51%,
          white 52%,
          white 55%,
          transparent 55%,
          transparent 100%);
      color: var(--ddsweb-theme-colors-grayscale);
      border-radius: 50%;
      position: absolute;
      inset: 0;
    }
    .b74ac0_o7KQoq_slantedLineSelected {
      --ddsweb-swatch-out-of-stock-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .b74ac0_o7KQoq_slantedLineHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .b74ac0_o7KQoq_slantedLine:hover {
      background:
        linear-gradient(
          to left bottom,
          transparent 45%,
          white 46%,
          white 49%,
          var(--ddsweb-swatch-hover-border-color) 50%,
          var(--ddsweb-swatch-hover-border-color) 51%,
          white 52%,
          white 55%,
          transparent 55%,
          transparent 100%);
    }
    .b74ac0_o7KQoq_slantedLine:active,
    .b74ac0_o7KQoq_slantedLine:focus {
      background:
        linear-gradient(
          to left bottom,
          transparent 45%,
          white 46%,
          white 49%,
          var(--ddsweb-swatch-tesco-blue) 50%,
          var(--ddsweb-swatch-tesco-blue) 51%,
          white 52%,
          white 55%,
          transparent 55%,
          transparent 100%);
    }
    .b74ac0_o7KQoq_swatchDataLayer {
      --ddsweb-swatch-min-hit-area: var(--ddsweb-theme-buttons-size-sm);
      --ddsweb-swatch-border-color: var(--ddsweb-theme-colors-grayscale);
      --ddsweb-swatch-tesco-blue: var(--ddsweb-theme-colors-tesco-blue);
      --ddsweb-swatch-hover-border-color: var(--ddsweb-swatch-border-color);
      box-sizing: border-box;
      width: var(--ddsweb-swatch-min-hit-area);
      height: var(--ddsweb-swatch-min-hit-area);
      border-style: solid;
      border-width: 1px;
      border-color: var(--ddsweb-swatch-border-color);
      background-size: contain;
      background: var(--ddsweb-swatch-background-color);
      border-radius: 50%;
      position: relative;
    }
    .b74ac0_o7KQoq_swatchDataLayerSm {
      --ddsweb-swatch-min-hit-area: var(--ddsweb-theme-buttons-size-xs);
    }
    .b74ac0_o7KQoq_swatchDataLayerSelected {
      --ddsweb-swatch-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .b74ac0_o7KQoq_swatchDataLayerHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .b74ac0_o7KQoq_swatchDataLayer:active,
    .b74ac0_o7KQoq_swatchDataLayer:focus {
      border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .b74ac0_o7KQoq_swatchDataLayer:hover {
      border-color: var(--ddsweb-swatch-hover-border-color);
    }
    .b74ac0_o7KQoq_unStyledButton,
    .b74ac0_o7KQoq_unStyledAnchor {
      cursor: pointer;
      background: none;
      border: none;
    }
    .b74ac0_o7KQoq_unStyledAnchor:focus,
    .b74ac0_o7KQoq_unStyledButton:focus,
    .b74ac0_o7KQoq_unStyledButton:active,
    .b74ac0_o7KQoq_unStyledAnchor:focus,
    .b74ac0_o7KQoq_unStyledAnchor:focus-visible,
    .b74ac0_o7KQoq_unStyledButton:focus-visible {
      border-radius: 50%;
    }
    .b74ac0_o7KQoq_dataLayerimage {
      box-sizing: border-box;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .b74ac0_o7KQoq_imageUnavailable {
      border: 1px solid #fff;
    }
    .b74ac0_o7KQoq_selectedIcon {
      box-sizing: border-box;
      z-index: 1;
      border: var(--ddsweb-theme-spacing-xxx) solid var(--ddsweb-theme-colors-primary);
      background-color: var(--ddsweb-theme-colors-background-base);
      width: 20px;
      height: 20px;
      color: var(--ddsweb-theme-colors-primary);
      cursor: default;
      border-radius: 50%;
      align-items: center;
      padding: 3px;
      display: flex;
      position: absolute;
      top: -5px;
      right: -5px;
    }
    .b74ac0_o7KQoq_selectedIcon .ddsweb-icon__svg {
      stroke-width: var(--ddsweb-theme-spacing-xx);
    }
  }
}


/*# sourceMappingURL=d5da273a562617e94bf6.css.map*/