@import 'moda-themes/themes';

.specific_product_colors {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  cursor: pointer;

  &:last-child {
    margin-right: 0;
  }

  &[data-sold-out='true'] {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid color('elephant');
      z-index: 1;
    }
  }

  .sold-out-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
  }
}

.specific_background_color {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;

  &:hover {
    outline: 1px solid color('transition-burgundy-red-to-black');
  }

  &[data-color-selected='true'] {
    outline: 1px solid color('transition-burgundy-red-to-black');
    outline-offset: 1px;
  }

  // SKU COLOR TRANSLATION
  &[data-color-code='black'] {
    background-color: color('black');
  }

  &[data-color-code='white'] {
    background-color: color('white');
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='off-white'] {
    background: #f6f6f6;
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='ivory'] {
    background: color('white');
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='nude'] {
    background: #eee4d7;
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='tan'] {
    background: #baa094;
  }

  &[data-color-code='light grey'] {
    background: #d8d8d7;
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='grey'] {
    background: #d8d8d7;
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='dark grey'] {
    background: #606161;
  }

  &[data-color-code='silver'] {
    // background: url(image-path("variants/silver.png"));
    background: #c0c0c0;
    // background-size: cover;
  }

  &[data-color-code='red'] {
    background: #ec1e24;
  }

  &[data-color-code='coral'] {
    background: #f05c5d;
  }

  &[data-color-code='brown'] {
    background: #774d2f;
  }

  &[data-color-code='bronze'] {
    background: #cd7f2e;
  }

  &[data-color-code='orange'] {
    background: #f07d25;
  }

  &[data-color-code='yellow'] {
    background: #ffca44;
  }

  &[data-color-code='gold'] {
    // background: url(image-path("variants/gold.png"));
    background: #d4af37;
    // background-size: cover;
  }

  &[data-color-code='khaki'] {
    background: #8e9f77;
  }

  &[data-color-code='green'] {
    background: #53893e;
  }

  &[data-color-code='lime green'] {
    background: #9ecb3b;
  }

  &[data-color-code='dark green'] {
    background: #325f2e;
  }

  &[data-color-code='olive'] {
    background: #515134;
  }

  &[data-color-code='blue'] {
    background: #3755a4;
  }

  &[data-color-code='light blue'] {
    background: #7bc0ef;
  }

  &[data-color-code='turquoise'] {
    background: #1e83a8;
  }

  &[data-color-code='royal blue'] {
    background: #0049ff;
  }

  &[data-color-code='navy'] {
    background: #353a49;
  }

  &[data-color-code='purple'] {
    background: #693953;
  }

  &[data-color-code='burgundy'] {
    background: #720e0e;
  }

  &[data-color-code='fuchsia'] {
    background: #ff00a4;
  }

  &[data-color-code='pink'] {
    background: #ff78bc;
  }

  &[data-color-code='light pink'] {
    background: #ffb8df;
  }

  &[data-color-code='rose gold'] {
    // background: url(image-path("variants/rosegold.png"));
    background: #b76e79;
    // background-size: cover;
  }

  &[data-color-code='metallic'] {
    // background: url(image-path("variants/metalic.png"));
    // background-size: cover;
  }

  &[data-color-code='clear'] {
    background: color('white');
    border: 1px solid color('sidewalk');
  }

  &[data-color-code='multi'] {
    // background: url(image-path("variants/multi.png"));
    // background-size: cover;
  }

  &[data-color-code='dark wash'] {
    // background: url(image-path("variants/dark_wash.png"));
    // background-size: cover;
  }

  &[data-color-code='medium wash'] {
    // background: url(image-path("variants/medium_wash.png"));
    // background-size: cover;
  }

  &[data-color-code='light wash'] {
    // background: url(image-path("variants/light_wash.png"));
    // background-size: cover;
  }

  &[data-color-code='print'] {
    // background: url(image-path("variants/print.png"));
    // background-size: cover;
  }

  &[data-color-code='floral'] {
    // background: url(image-path("variants/floral.png"));
    // background-size: cover;
  }

  &[data-color-code='plaid'] {
    // background: url(image-path("variants/plaid.png"));
    // background-size: cover;
  }

  &[data-color-code='stripe'] {
    // background: url(image-path("variants/stripe.png"));
    // background-size: cover;
  }

  &[data-color-code='neutral'] {
    background: #f7e7d5;
  }

  &[data-color-code='animal'] {
    // background: url(image-path("variants/animal.png"));
    // background-size: cover;
  }

  &[data-color-code='black/white'] {
    // background: url(image-path("variants/black_and_white.png"));
    // background-size: cover;
  }

  &[data-color-code='python'] {
    // background: url(image-path("variants/python.png"));
    // background-size: cover;
  }
}