@import '../prefix';

.#{$prefix}--homepage-video-container {
  position: relative;
  height: 150vw;

  @include carbon--breakpoint('md') {
    height: 50vw;
  }

  @include carbon--breakpoint('lg') {
    height: 35rem;
  }
}

.#{$prefix}--homepage-video-wrapper {
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 100%;
  z-index: 11;
  height: 100%;
}

.#{$prefix}--homepage-video-overlay-content {
  position: relative;
  z-index: 12;
  height: 100%;

  @include carbon--breakpoint-down('md') {
    margin-right: -2rem !important;
  }

  @include carbon--breakpoint('md') {
    padding-right: 0 !important;
  }
}

.#{$prefix}--homepage-video-container-cta {
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: relative;

  @include carbon--breakpoint('md') {
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 0 !important;
  }
}

.#{$prefix}--homepage-video-cta {
  color: $carbon--white-0;
  text-decoration: none;
  transition-property: background, color;
  transition-duration: $transition--base;
  transition-timing-function: $carbon--standard-easing;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-width: 1px;
  z-index: 2;
  position: relative;
  padding: $spacing-05;

  &:first-of-type {
    border-top-width: 0;
  }

  &:visited {
    text-decoration: none;
  }

  &:hover {
    background: $carbon--white-0;
    color: $carbon--gray-100;
    text-decoration: none;

    svg {
      fill: $carbon--gray-100;
    }

    p {
      color: $carbon--gray-100;
    }
  }

  &:active {
    text-decoration: none;
  }

  @include carbon--breakpoint('md') {
    height: 100%;
    width: 25%;
    border-top-width: 0;
    border-left-width: 1px;
  }

  @include carbon--breakpoint('max') {
    &:last-of-type {
      border-right-width: 1px;
    }
  }
}

.#{$prefix}--homepage-video-arrow-container {
  margin-top: auto;
  align-self: flex-end;
  justify-content: flex-end;
  display: flex;
}

.#{$prefix}--homepage-video-cta-icon {
  fill: $carbon--white-0;
  width: rem(20px);
  height: rem(20px);
  transition: fill $transition--base $carbon--standard-easing;
}