/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/web-components/scss/components/tooltip/tooltip' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../image';

@mixin background-media {
  :host(#{$c4d-prefix}-background-media) {
    position: relative;
    display: block;
    overflow: clip;
    block-size: 100%;
    outline: none;

    .#{$c4d-prefix}--image__img {
      display: block;
      block-size: 100%;
      inline-size: 100%;
      object-fit: cover;
    }
  }

  .#{$prefix}--background-media--mobile-position {
    block-size: 100%;
  }

  .#{$prefix}--background-media--gradient {
    position: absolute;
    z-index: 1;
    display: block;

    background-image: linear-gradient(
      to bottom,
      $background 0%,
      rgba(255, 255, 255, 0) 100%
    );
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .#{$prefix}--background-media--gradient--left-to-right {
    @include breakpoint(lg) {
      background-image: linear-gradient(
        to right,
        $background 25%,
        rgba(255, 255, 255, 0) 75%
      );

      [dir='rtl'] & {
        background-image: linear-gradient(
          to left,
          $background 25%,
          rgba(255, 255, 255, 0) 75%
        );
      }
    }
  }

  .#{$prefix}--background-media--gradient--right-to-left {
    @include breakpoint(lg) {
      background-image: linear-gradient(
        to left,
        $background 25%,
        rgba(255, 255, 255, 0) 75%
      );
    }
  }

  .#{$prefix}--background-media--gradient--top-to-bottom {
    @include breakpoint(lg) {
      background-image: linear-gradient(
        to bottom,
        $background 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }

  .#{$prefix}--video-player__controls {
    position: absolute;
    z-index: 2;
    padding: 0;
    border: none;
    border-radius: 50%;
    appearance: none;
    background: $background;
    color: $text-primary;
    cursor: pointer;
    inset-block-end: $spacing-07;
    inset-inline-end: $spacing-07;
    line-height: 0;
  }

  .#{$prefix}--video-player__controls[hasTooltip] {
    @include tooltip--trigger('definition', top);
    @include tooltip--placement('definition', 'top', 'end');

    position: absolute;
    border: $spacing-01 solid transparent;
    background-clip: padding-box;

    &:focus {
      border-color: $text-primary;
      outline: $spacing-01 solid $background;
    }
  }

  .#{$prefix}--background-media--container {
    contain: layout;
  }

  .#{$prefix}--background-media--item {
    block-size: 100%;
  }
}