/**
 * @file
 * Footer Sock
 *
 * Contains styles for Footer Sock.
 */

@use '_helper' as *;

.footer-sock {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: $color-black;

  a {
    color: $color-white;

    &:hover {
      text-decoration-color: $color-white;
    }
  }

  a,
  button {
    @include focus-light;
  }

  .cta {
    &--button {
      @include ctaButton($darkBG: true);
    }
  }

  .container {
    position: relative;
    padding-bottom: rem(36px);
    z-index: 3;

    @media screen and (min-width: $break-large) {
      padding-bottom: rem(82px);
    }
  }

  .footer-sock {
    &__bg {
      position: relative;

      @media screen and (min-width: $break-medium) {
        position: static;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        width: 100svw;
        height: 100%;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
      }

      img,
      picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }
    }

    &__video {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s ease;

      &.js-show {
        opacity: 1;
      }

      &-btn {
        position: absolute;
        left: rem(18px);
        bottom: rem(70px);
        z-index: 2;
        width: rem(30px);
        height: rem(30px);
        border: 1px solid $color-white;
        background-color: $color-black;
        border-radius: 100%;
        transition: all .3s;

        @media screen and (min-width: $break-medium) {
          left: rem(31px);
          bottom: rem(65px);
          width: rem(38px);
          height: rem(38px);
        }

        @media screen and (min-width: $break-large) {
          left: rem(58px);
          bottom: rem(80px);
        }

        &:hover {
          border-color: $color-black;
          background-color: $color-white;

          &::before {
            border-color: $color-black;
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: rem(4px);
          height: rem(12px);
          border: .3rem solid $color-white;
          border-width: 0 .3rem;
          transform: translate(-50%, -50%);
        }

        &.is-paused {
          &::before {
            width: 0;
            height: 0;
            border-top: rem(7px) solid transparent;
            border-bottom: rem(7px) solid transparent;
            border-left: rem(10px) solid $color-white;
            border-right: 0;
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
            transform: translate(calc(-50% + 2px), -50%);
          }

          &:hover {
            &::before {
              border-left-color: $color-black;
            }
          }
        }
      }
    }

    &__title {
      padding: rem(132px) 0 0;
      color: $color-white;
      background-color: transparent;

      @media screen and (min-width: $break-large) {
        margin: 0;
        padding: rem(280px) 0 0;
      }

      h2 {
        max-width: 600px;
        margin: 0;
        color: $color-white;
      }

      &-eyebrow {
        font-family: $font-roboto-condensed;
        font-size: rem(18px);
        font-style: normal;
        font-weight: 900;
        line-height: 1.85;
        text-transform: uppercase;

        @media screen and (min-width: $break-medium) {
          font-size: rem(22px);
        }

        @media screen and (min-width: $break-large) {
          font-size: rem(32px);
        }
      }

      &-main {
        display: block;
        font-family: "Roboto Slab";
        text-transform: capitalize;
        font-size: rem(55px);
        font-style: normal;
        font-weight: 400;
        line-height: 0.9;

        @media screen and (min-width: $break-medium) {
          font-size: rem(80px);
        }

        @media screen and (min-width: $break-large) {
          font-size: rem(120px);
        }
      }
    }

    &__cta {
      padding: rem(20px) 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: rem(10px);

      @media screen and (min-width: $break-medium) {
        padding: rem(30px) 0 0;
      }

      @media screen and (min-width: $break-large) {
        padding: rem(37px) 0 0;
        gap: rem(13px);
      }
    }
  }
}