/* src/components/swatch/src/components/swatch/styles.module.css */
@layer ddsweb-organisms {
  @layer ddsweb-one-tile {
    .Can7rG_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;
    }
    .Can7rG_swatchBaselayerSm {
      --ddsweb-swatch-container-area: 30px;
      border-width: var(--ddsweb-theme-spacing-xxx);
    }
    .Can7rG_swatchBaselayerHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .Can7rG_swatchBaselayer:active,
    .Can7rG_swatchBaselayer:focus .Can7rG_swatchBaselayer:focus-visible {
      border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .Can7rG_swatchBaselayer:hover {
      border-color: var(--ddsweb-swatch-hover-border-color);
    }
    .Can7rG_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;
    }
    .Can7rG_slantedLineSelected {
      --ddsweb-swatch-out-of-stock-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .Can7rG_slantedLineHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .Can7rG_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%);
    }
    .Can7rG_slantedLine:active,
    .Can7rG_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%);
    }
    .Can7rG_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;
    }
    .Can7rG_swatchDataLayerSm {
      --ddsweb-swatch-min-hit-area: var(--ddsweb-theme-buttons-size-xs);
    }
    .Can7rG_swatchDataLayerSelected {
      --ddsweb-swatch-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .Can7rG_swatchDataLayerHoverMode {
      --ddsweb-swatch-hover-border-color: var(--ddsweb-theme-colors-tesco-blue);
    }
    .Can7rG_swatchDataLayer:active,
    .Can7rG_swatchDataLayer:focus {
      border-color: var(--ddsweb-swatch-tesco-blue);
    }
    .Can7rG_swatchDataLayer:hover {
      border-color: var(--ddsweb-swatch-hover-border-color);
    }
    .Can7rG_unStyledButton,
    .Can7rG_unStyledAnchor {
      cursor: pointer;
      background: none;
      border: none;
    }
    .Can7rG_unStyledAnchor:focus,
    .Can7rG_unStyledButton:focus,
    .Can7rG_unStyledButton:active,
    .Can7rG_unStyledAnchor:focus,
    .Can7rG_unStyledAnchor:focus-visible,
    .Can7rG_unStyledButton:focus-visible {
      border-radius: 50%;
    }
    .Can7rG_dataLayerimage {
      box-sizing: border-box;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .Can7rG_imageUnavailable {
      border: 1px solid #fff;
    }
    .Can7rG_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;
    }
    .Can7rG_selectedIcon .ddsweb-icon__svg {
      stroke-width: var(--ddsweb-theme-spacing-xx);
    }
  }
}


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