///////////////////////
// THEMING
///////////////////////

.tinted-palette__color__color-text,
.tinted-palette__color__slider {
  .tinted--dark & {
    opacity: 0.8;
  }
}

.tinted-palette__color__color-text {
  color: black;
  background: transparent;

  .tinted--dark & {
    color: white;
  }
}

.tinted-palette__color__slider::before {
  color: black;

  .tinted--dark & {
    color: white;
  }
}

@mixin _slider-track-color() {
  background: black;
  color: black;

  .tinted--dark & {
    background: white;
    color: white;
  }
}

@mixin _slider-thumb-color() {
  background: white;
  border: 2px solid black;

  .tinted--dark & {
    background: black;
    border-color: white;
  }
}

///////////////////////
// LAYOUT
///////////////////////

.tinted-palette {
  display: flex;
  margin-top: 10px;
}

.tinted-palette__color {
  flex: 1;
  padding: 0 5px;
  border-radius: 50%;
}

.tinted-palette__color__swatch {
  position: relative;
  border-radius: 50%;
  padding-top: 100%;
}

.tinted-palette__color__color-text {
  outline: none;
  width: 100%;
  border: none;
  font-family: Monaco, monospace;
  text-align: center;
}

// This is an optional element intended to provide an easy way to add
// something (e.g. a button) beneath each color
.tinted-palette-for-each-color {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.tinted-palette__color__slider {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 15px;
  -webkit-appearance: none;
  outline: none;
  background: transparent;

  &::before {
    content: attr(value) '%';
    display: block;
    position: absolute;
    top: 25px;
    width: 100%;
    font-size: 10px;
    text-align: center;
  }

  // For reasons I don't understand, these cannot be comma separated
  // and must be declared separately
  @mixin _slider-track() {
    height: 2px;
    border: none;
    margin: 1em 0;
    @include _slider-track-color;
  }
  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    @include _slider-track;
  }
  &::-moz-range-track {
    @include _slider-track;
  }
  &::-ms-track {
    @include _slider-track;
  }

  @mixin _slider-thumb() {
    height: 15px;
    width: 15px;
    border-radius: 99px;
    cursor: ew-resize;
    @include _slider-thumb-color;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -7px;
    @include _slider-thumb;
  }
  &::-moz-range-thumb {
    @include _slider-thumb;
  }
  &::-ms-thumb {
    @include _slider-thumb;
  }

  &::-ms-fill-lower,
  &::-ms-fill-upper,
  &::-ms-ticks-before,
  &::-ms-ticks-after,
  &::-ms-tooltip {
    display: none;
  }
}