@import '../../node_modules/plyr/src/sass/plyr.scss';
.plyr {
    font-family: 'Saira', sans-serif;
    font-weight: 400;
    border-radius: 0;

    aspect-ratio: 16/9;
    // margin-top: 30px;
    // border: 1px solid #d5d5d5;
    // border: 1px solid #000;
  }

  .plyr__tooltip {
    font-weight: 400;
  }

  .plyr__tab-focus {
    box-shadow: none;
    outline: none;
  }

  .plyr__control {
    border-radius: 0px;
  }

  @media (min-width: 768px) {
    .plyr {
      // margin-top: 40px;
    }
  }

  @media (min-width: 1200px) {
    .plyr {
      // margin-right: 30px;
    }

    .plyr__controls {
      padding: 20px !important;
    }
  }

  .plyr__menu__container .plyr__control {
    transition: 0s ease;
  }

  .plyr__control.plyr__control--overlaid {
    border-radius: 50%;
  }

  .plyr--video {
    .plyr__control {
      &.plyr__tab-focus, &:hover, &[aria-expanded="true"] {
        background: none;
        background-color: theme('colors.primary');
      }
    }

    .plyr__control--overlaid {
      background-color: theme('colors.primary');
      box-shadow: none;
      padding: 26px;
      transition: 0.5s ease;
      color: #fff;
      border: 3px solid #fff;
      opacity: 1;

      &:before {
        content: '';
        position: absolute;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border-radius: 50%;
        background: url("../images/play.svg") no-repeat center;
        z-index: 1;
        transform: scale(1.8);
        @apply scale-100 md:scale-150;
      }

      svg {
        display: none;
      }

      &:hover, &.plyr__tab-focus {
        background-color: theme('colors.elbg');
        color: #fff;
      }
    }

    .plyr__progress__buffer {
      box-shadow: none;
    }
  }

  @media (min-width: 768px) {
    .plyr--video .plyr__control--overlaid {
      padding: 33px;

      &:before {
        background-size: 20px auto;
      }
    }
  }

  .plyr__progress__buffer {
    border-radius: 0;
  }

  .plyr--full-ui input[type="range"] {
    color: theme('colors.primary');
    border-radius: 0;
  }

  .plyr__control.plyr__tab-focus {
    box-shadow: none;
  }

  .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
    background: none;
    background-color: theme('colors.primary');
  }

  .plyr--video .plyr__control svg {
    filter: none;
  }
  :root {
    --plyr-color-main: theme('colors.primary');
}