// This allows each UI component to be used in dark or light theme regardless of the global theme.
@mixin themeable {
  // Will force the light style on this component.
  &--light {
    --w-base-bg-color: #fff;
    --w-base-color: #000;
    --w-contrast-bg-color: #000;
    --w-contrast-color: #fff;
    --w-caption-color: #a0a0a0;
    --w-disabled-color: #ccc;
    color: var(--w-base-color-muted);
  }
  // Will force the dark style on this component.
  &--dark {
    --w-base-bg-color: #222;
    --w-base-color: #fff;
    --w-contrast-bg-color: #fff;
    --w-contrast-color: #000;
    --w-caption-color: #6e6e6e;
    --w-disabled-color: #4a4a4a;
    color: var(--w-base-color-muted);
  }
}

@mixin default-transition($duration: var(--w-transition-duration), $delay: 0s) {
  transition: $duration $delay ease-in-out;
}

@mixin out-back-transition($duration: var(--w-transition-duration), $delay: 0s) {
  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

// Generates a triangle arrow on the edge of an element.
// @param $color: the color to apply to the triangle.
// @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
// @param $size: the triangle size at the base.
// @param $thickness: the border thickness, 0 to remove the border.
@mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
  @if ($thickness > 0) {
    // The underneath border triangle.
    &:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: $size solid transparent;
    }

    &#{$selector}--top:before {
      top: 100%;
      left: 50%;
      border-top-color: inherit;
      transform: translateX(-50%);
      margin-top: 0;
    }
    &#{$selector}--bottom:before {
      bottom: 100%;
      left: 50%;
      border-bottom-color: inherit;
      transform: translateX(-50%);
      margin-bottom: 0;
    }
    &#{$selector}--left:before {
      left: 100%;
      top: 50%;
      border-left-color: inherit;
      transform: translateY(-50%);
      margin-left: 0;
    }
    &#{$selector}--right:before {
      right: 100%;
      top: 50%;
      border-right-color: inherit;
      transform: translateY(-50%);
      margin-right: 0;
    }

    &#{$selector}--align-top:before {
      transform: none;
      top: calc(2 * var(--w-base-increment) - 1px);
    }
    &#{$selector}--align-bottom:before {
      transform: none;
      top: auto;
      bottom: calc(2 * var(--w-base-increment) - 1px);
    }
    &#{$selector}--align-left:before {
      transform: none;
      left: calc(2 * var(--w-base-increment) - 1px);
    }
    &#{$selector}--align-right:before {
      transform: none;
      left: auto;
      right: calc(2 * var(--w-base-increment) - 1px);
    }
  }

  // The colored triangle on top of `:before`.
  &:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: ($size - $thickness) solid transparent;
  }
  &#{$selector}--top:after {
    top: 100%;
    left: 50%;
    border-top-color: $color;
    transform: translateX(-50%);
  }
  &#{$selector}--bottom:after {
    bottom: 100%;
    left: 50%;
    border-bottom-color: $color;
    transform: translateX(-50%);
  }
  &#{$selector}--left:after {
    left: 100%;
    top: 50%;
    border-left-color: $color;
    transform: translateY(-50%);
  }
  &#{$selector}--right:after {
    right: 100%;
    top: 50%;
    border-right-color: $color;
    transform: translateY(-50%);
  }

  &#{$selector}--align-top:after {transform: none;top: calc(2 * var(--w-base-increment));}
  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: calc(2 * var(--w-base-increment));}
  &#{$selector}--align-left:after {transform: none;left: calc(2 * var(--w-base-increment));}
  &#{$selector}--align-right:after {transform: none;left: auto;right: calc(2 * var(--w-base-increment));}
}