@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/animation';

@layer kz-components {
  .wrapper {
    width: 100%;
    margin: 0;
  }

  .figure {
    margin: 0;
    position: relative;
  }

  // nested to get more specificity, beat out the generic button styles
  .figure .pausePlayButton {
    opacity: 0%;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    /* stylelint-disable declaration-no-important */
    background-color: $color-white !important;
    border: 1px solid $color-gray-400;
    transition: all $animation-duration-immediate;

    @media (hover: none) and (pointer: coarse) {
      opacity: 100%;
    }

    svg {
      color: $color-purple-800;
      opacity: 70%;
    }

    &:hover,
    &:focus {
      opacity: 100%;
      background-color: $color-gray-200 !important;

      svg {
        opacity: 100%;
      }
    }
  }

  .figure:hover {
    .pausePlayButton {
      opacity: 100%;
    }
  }

  .aspectRatioWrapper {
    margin: 0;
    display: flex;
    align-items: center;
  }

  .landscape {
    aspect-ratio: 4/3;

    @supports not (aspect-ratio: auto) {
      &::before {
        float: left;
        padding-top: 75%;
        content: '';
      }

      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }
  }

  .portrait {
    aspect-ratio: 3/4;

    @supports not (aspect-ratio: auto) {
      &::before {
        float: left;
        padding-top: 133.33%;
        content: '';
      }

      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }
  }

  .square {
    aspect-ratio: auto 1/1;

    @supports not (aspect-ratio: auto) {
      &::before {
        float: left;
        padding-top: 100%;
        content: '';
      }

      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }
  }

  // If the .visually-hidden class is applied to natively focusable elements
  // (such as a, button, input, etc) they must become visible when they receive
  // keyboard focus. Otherwise, a sighted keyboard user would have to try and
  // figure out where their visible focus indicator had gone to.
  .visuallyHidden:not(:focus, :active) {
    clip-path: rect(0 0 0 0);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
  }
}