@import '../../../../sources/styles/include.scss';

$component: 'video';
$template: 'fixed-1';
$item: 'widget-item';

.widget.c-#{$component}.c-#{$component}-#{$template} {
  .widget-container {
    position: relative;
  }

  .#{$item} {
    position: fixed;
    bottom: 40px;
    width: 142px;
    height: 202px;
    border: 1px solid #212121;
    border-radius: 7px;
    filter: drop-shadow(0px 4px 18px rgba(0, 0, 0, 0.25));
    cursor: pointer;
    overflow: hidden;
    z-index: 50;

    @include transition(0.4s, all);

    &[data-position='left'] {
      left: 40px;

      &[data-scaled='true'] {
        @include transform(translate(50%, -50%) scale(2));
      }

      &[data-scaled='false'] {

        &:hover {
          .widget-button-icon {

            &[data-role='close'] {
              opacity: 1;
            }
          }

          @include transform(translate(5%, -5%) scale(1.1));
        }
      }
    }

    &[data-position='right'] {
      right: 40px;

      &[data-scaled='true'] {
        @include transform(translate(-50%, -50%) scale(2));
      }

      &[data-scaled='false'] {

        &:hover {
          .widget-button-icon {

            &[data-role='close'] {
              opacity: 1;
            }
          }

          @include transform(translate(-5%, -5%) scale(1.1));
        }
      }
    }

    &[data-scaled='true'] {
      .widget-button {
        animation-name: buttonshow;
      }

      .widget-button-icon {
        right: 2px;
        transform: scale(0.55);

        &[data-role='close'] {
          top: 2px;
          opacity: 1;
        }

        &[data-role='roll.up'] {
          top: 16px;
          opacity: 1;
        }

        &[data-role='volume'] {
          top: 30px;
          opacity: 1;
        }
      }
    }

    &[data-state='hidden'] {
      display: none;
    }
  }

  .#{$item}-video {
    height: 100%;
  }

  .widget-button {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-weight: 600;
    font-size: 8px;
    line-height: 10px;
    padding: 5px 10px;
    word-break: break-word;
    opacity: 0;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  @keyframes buttonshow {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .widget-button-icon {
    position: absolute;
    right: 8px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;

    @include transition(0.4s, all);

    &[data-role='close'] {
      top: 8px;
    }

    &[data-role='volume'] {

      &[data-state='off'] {

        *[data-code='volume.on'] {
          display: none;
        }
      }

      &[data-state='on'] {

        *[data-code='volume.off'] {
          display: none;
        }
      }
    }
  }

  @media all and (max-width: 425px) {
    .#{$item} {

      &[data-position='left'] {
        left: 18px;
      }

      &[data-position='right'] {
        right: 18px;
      }
    }
  }
}