/*!
 * @license
 * The tooltip is based on https://github.com/felipefialho/css-components/
 * Local modifications have been performed.
 *
 * Copyright (c) 2017 Felipe Fialho
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@material-icons-width: 48px;

.translateX(@percent) {
  -webkit-transform: translateX(percentage(@percent));
  -moz-transform: translateX(percentage(@percent));
  -ms-transform: translateX(percentage(@percent));
  -o-transform: translateX(percentage(@percent));
  transform: translateX(percentage(@percent));
}

/* .shaka-tooltips-on enables the tooltips and is only added to the
 * control panel when the 'enableTooltips' option is set to true */
.shaka-tooltips-on {
  overflow: visible;

  & > .shaka-tooltip,
  & > .shaka-tooltip-status {
    position: relative;

    /* The :after pseudo-element contains the tooltip */
    &:hover:after,
    &:focus-visible:after,
    &:active:after {
      content: attr(aria-label);

      /* Override .material-icons-round text styling */
      font-family: @general-font-family;
      line-height: 20px;
      white-space: nowrap;
      font-size: @general-font-size;

      /* Styling */
      background: @general-background-color;
      color: @general-font-color;
      border-radius: 2px;
      padding: 2px 10px;

      /* Positioning */
      position: absolute;
      bottom: @material-icons-width + 14px;

      /* Left attribute is set to half of the width of the parent button */
      left: calc(@material-icons-width / 2);

      /* The tooltip is also translated 50% to appear centered */
      .translateX(-0.5);

      @media (prefers-reduced-transparency) {
        background-color: @general-background-color-mostly-opaque;
      }
    }
  }

  // If the seekbar is missing, this is positioned lower.
  &.shaka-tooltips-bottom {
    & > .shaka-tooltip {
      &:hover:after,
      &:focus-visible:after,
      &:active:after {
        bottom: -1 * (@material-icons-width/2);
      }
    }
  }

  // If the seekbar is missing, this is positioned lower.
  &.shaka-tooltips-low-position {
    & > .shaka-tooltip {
      &:hover:after,
      &:focus-visible:after,
      &:active:after {
        bottom: @material-icons-width;
      }
    }
  }

  /* Adds an additional attribute for the status in .shaka-tooltip-status */
  & > .shaka-tooltip-status {
    &:hover:after, &:focus-visible:after, &:active:after {
      content: attr(aria-label) " (" attr(shaka-status) ")";
    }
  }

  /* The first tooltip of the panel is not centered on top of the button
   * but rather aligned with the left border of the control panel */
  button:first-child {
    &:hover:after, &:focus-visible:after, &:active:after {
      left: 0;
      .translateX(0);
    }
  }

  /* The last tooltip of the panel is not centered on top of the button
   * but rather aligned with the right border of the control panel */
  button:last-child {
    &:hover:after, &:focus-visible:after,&:active:after {
      left: @material-icons-width;
      .translateX(-1);
    }
  }
}