@import '../../../styles/vars/breakpoints.css';

:global(.d-slide-colored) .card  {
  box-shadow: none;
}

:global(.d-slide-colored) .theme-second ,
:global(.d-slide-colored) .theme-third {
  background-color: rgb(255,255,255,0.09) !important;
}


.theme-second .video:global(.g-component-radius) {
  @media (--ms-and-up) {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

.theme-third .video:global(.g-component-radius) {
  @media (--ms-and-down) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  @media (--sm-and-up) {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
  }
}

.card {
  width: 100%;
  height: 384px;
  border-radius: 20px;
  /* box-shadow: 0 6px 40px 0 rgba(83, 180, 231, 0.4); */
  box-sizing: border-box;
  overflow: hidden;

  @media (--ms-and-down) {
    height: 450px;
    overflow: hidden;
    &.isStarted {
      height: auto;
    }
  }
}

.video {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

/* .unMute{
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: opacity 0.3s ease;
    &:hover{
        opacity: 1;
    }

    @media (--md-and-down) {
      opacity: 1;
    }
} */
/* .speaker{
    position: absolute;
    width: 150px;
    height: 150px;
    color: white;
    position: absolute;
    z-index: 10;
    @media (--sm-and-down) {
      width: 70px;
      height: 70px;
    }
} */
.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 20px;
  z-index: 1;
}

.playBtn {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: #8513e8;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 5; 
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &:hover,
  &:focus,
  &.active {
    &:before {
      opacity: 0.08;
    }
  }

  :global(.d-slides-viewer-slide:not(.d-dialogs-finished) ~ *) & {
    pointer-events: none;
  }

  :global(.d-slides-viewer-slide:not(.active)) & {
    pointer-events: none;
  }
}

.playIcon {
  color: #fff;
  font-size: rem(22px);
  margin-left: 3px;
  position: relative;
  z-index: 3;
}

.title {
  margin: 0;
  letter-spacing: 0.1px;
}

.bg {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.text {
  display: none;
  margin: 0;
  width: 525px;
  font-size: rem(16px);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.4px;
  /* color: #1f1f1f; */
  margin-top: 14px;
   &.editing {
    &:active,
    &:focus,
    &:hover {
      width: 100%;
      outline: auto !important;
      outline-color: #4D90FE !important;
      outline-width: 5px !important;
      outline-offset: -2px  !important;
      outline-style: auto  !important;
    }
  }
}

.window {
  width: calc(90vh * 1.7);
  max-width: 100%;
  height: 90vh;
  @media (orientation: portrait) {
    width: 98vw;
    height: auto;
  }
  @media (--md-only) {
    width: calc(90vh * 1.45);
  }
}

.close {
  color: #fff;
  opacity: 0.3;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: rem(24px);
  @media (--ms-only) {
    :global(.env-action-wrapper) {
      width: 30px;
      height: 30px;
    }
    top: 10px;
    right: 10px;
  }
   @media (--md-only) {
    top: 15px;
    right: 15px;
  }
}

.theme-default {
  .content {
    justify-content: flex-end;
    padding: 34px 40px;
    box-sizing: border-box;
    @media (--ms-and-down) {
      padding: 24px 30px;
    }
  }

  /* .chip {
    margin-bottom: 18px;
  } */

  .title {
    font-size: rem(20px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin-top: 18px;
  }

  .playBtn {
    @media (--ms-and-down) {
      margin: 25% * auto;
    }
    @media (--xs-only) {
      margin-top: 100px;
    }
  }

  .bg,
  .content {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

.theme-second,
.theme-third {
  /* height: 384px; */
  height: auto;
  background-color: #ffffff;
  display: flex;

  @media (--ms-and-down) {
    height: auto;
    border-bottom-left-radius: 20px;
  }

  .wrapper {
    @media (--sm-and-down) {
      display: block;
    }
  }

  .content {
    position: static;
    justify-content: center;
    padding: 40px 30px;
    z-index: initial;

    @media (--ms-and-down) {
      padding: 30px;
      box-sizing: border-box;
    }
  }
  .bg {
    @media (--ms-and-down) {
      height: 240px;
    }
  }

  .title {
    width: 525px;
    /* height: 58px; */
    min-height: 25px;
    font-size: rem(24px);
    font-weight: bold;
    line-height: normal;
    /* color: #282828; */
    margin-top: 15px;

    @media (--sm-and-down) {
      /* size: 100% auto; */
      width: 100%;
      height: auto;
    }
  }
  .text {
    display: block;

    @media (--sm-and-down) {
      /* size: 100% auto; */
      width: 100%;
      height: auto;
    }
  }

  &.isStarted {
    .bg {
      display: none;
    }
  }

  .bg {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

.theme-second .video {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;

  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  @media (--sm-and-down) {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 210px;
  }
  @media (--sm-only) {
    height: 310px;
  }
}

.theme-third .video {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  @media (--ms-and-down) {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    height: 210px;
  }
}

.theme-third .wrapper {
  flex-direction: row-reverse;
}

.theme-four {
  .content {
    width: 380px;
    left: 40px;
    justify-content: center;
    box-sizing: border-box;

    @media (--ms-and-down) {
      /* size: 100% 100%; */
      width: 100%;
      height: 100%;
      left: 0;
      justify-content: flex-end;
      padding: 24px 30px;
    }
  }
  .playBtn {
    position: absolute;
    top: 50%;
    right: 25%;
    transform: translate(25%, -50%);

    @media (--ms-and-down) {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      margin: 25% * auto;
    }

    @media (--xs-only) {
      margin-top: 100px;
    }
  }
  /* .chip {
    margin-bottom: 10px;
  } */
  .title {
    width: 380px;
    font-size: rem(36px);
    line-height: 1.4;
    padding-bottom: 21px;
    font-weight: bold;
    letter-spacing: 0.1px;
    color: #ffffff;
    margin-top: 10px;

    @media (--ms-and-down) {
      width: 100%;
      /* text: 400 rem(20px) 1.35; */
      letter-spacing: 0.4px;
      padding-bottom: 0;
      font-weight: 400;
      font-size: rem(20px);
      line-height: 1.35;
    }
  }

  &.isStarted {
    .bg,
    .content {
      display: none;
    }
  }

  .bg,
  .content {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

.theme-bot {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* box-shadow: 0 6px 40px 0 rgba(155, 176, 239, 0.4), 0 1px 4px 0 rgba(0, 0, 0, 0.05); */

  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .content {
    display: none;
  }

  .playBtn {
    background: #ff2b6e;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);

    @media (--ms-and-down) {
      /* size: 60px 60px; */
      width: 60px;
      height: 60px;
    }
  }

  .playIcon {
    @media (--ms-and-down) {
      font-size: rem(18px);
    }
  }
}

:global(.dir--rtl) {
  .theme-third .wrapper {
    flex-direction: row;
  }
  .theme-second .wrapper{
    flex-direction: row-reverse;
  }
}