/*

#############################
### ORGANISM: video-slider ########
#############################

*/


@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'components/atoms/_headline.scss';
@import 'components/atoms/_text.scss';

.#{utility('video-slider')} {
  overflow-x: hidden;
  
  @media (min-width: 930px) {
    padding: 40px 0;
  }
}
.#{organism('video-slider')} {
  &-text {
    width: 100%;
  }

  &-carousel {
    amp-youtube {
      box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.16);
      margin: 30px 0 70px 20px;
    }

    .amp-carousel-button {
      width: 3em;
      height: 3em;
      border-radius: 50%;
      box-shadow: 0 10px 15px 0 rgba(0,0,0,0.4);
      transition: 400ms;
      background-color: color('athens-gray');
      outline: none;

      &-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E");
      }

      &-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E");
      }

      &:hover {
        cursor: pointer;
        box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
        background-color: #FFFFFF;
      }
    }
  }
}
