/*******************************************************************************
  Host and CSS properties
*******************************************************************************/

:host {
  --macro-carousel-navigation-color: #000;
  --macro-carousel-navigation-color-focus: var(--macro-carousel-navigation-color);
  --macro-carousel-navigation-color-background: transparent;
  --macro-carousel-navigation-color-background-focus: #f0f0f0;
  --macro-carousel-navigation-button-size: 48px;
  --macro-carousel-navigation-icon-size: 24px;
  --macro-carousel-navigation-icon-mask: svg-load('../arrow-left.svg', fill: #000);

  position: relative;

  display: inline-flex;
  min-width: var(--macro-carousel-navigation-button-size);
  min-height: var(--macro-carousel-navigation-button-size);

  border-radius: 50%;

  overflow: hidden;

  cursor: pointer;

  contain: paint;
}

:host([disabled]) {
  opacity: .2;
}

.content,
.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--macro-carousel-navigation-color-background);
}

/*
 * bg colored circle.
 */
.bg {
  z-index: 0;

  background-color: var(--macro-carousel-navigation-color-background-focus);

  opacity: 0;

  will-change: opacity;
}

.icon {
  position: relative;

  z-index: 1;

  width: var(--macro-carousel-navigation-icon-size);
  height: var(--macro-carousel-navigation-icon-size);

  /*
   * Fallback for when mask-image is not supported:
   * using the SVG as a background. Only issue, the icon color
   * won't change.
  */
  color: var(--macro-carousel-navigation-color);

  background: var(--macro-carousel-navigation-icon-mask);
}

@supports (mask-image: var(--macro-carousel-navigation-icon-mask)) {
  .icon {
    background: var(--macro-carousel-navigation-color);

    /* References:
    * - https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
    * - https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
    */
    mask-image: var(--macro-carousel-navigation-icon-mask);
  }
}

:host([flipped]) .icon {
  transform: rotateZ(180deg);
}

/*
 * Show the bg circle when the button is not disabled and is hovered, active,
 * focused or keyboard-focused (thanks to the focus-visible polyfill).
 */
:host(:hover:not([disabled])) .bg,
:host(:active:not([disabled])) .bg,
:host(:focus:not([disabled])) .bg,
:host(.focus-visible) .bg {
  opacity: 1;
}

/*
 * Do not show the bg circle if the button is focused (but not active or not hovered)
 * and doesn't have a focused-visible class. This means, do not leave the bg showing
 * after the user clicks on the button.
 */
:host-context(.js-focus-visible):host(:focus:not(:active):not(:hover):not(.focus-visible)) .bg {
  opacity: 0;
}

@supports (mask-image: var(--macro-carousel-navigation-icon-mask)) {
  /*
   * Same as rules above, but for the icon's color.
   */
  :host(:hover:not([disabled])) .icon,
  :host(:active:not([disabled])) .icon,
  :host(:focus:not([disabled])) .icon,
  :host(.focus-visible) .icon {
    background: var(--macro-carousel-navigation-color-focus);
  }

  :host-context(.js-focus-visible):host(:focus:not(:active):not(:hover):not(.focus-visible)) .icon {
    background: var(--macro-carousel-navigation-color);
  }
}
