@import "./../../styles/variables";

.container {
  margin-top: 200px;
}

.movies__container,
.shows__container {
  margin: 2rem 0;
  min-height: 465px;
  position: relative;
}

.movies__title,
.shows__title {
  position: absolute;
  margin: 12px 0;

  a {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 10;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      border-radius: 4px;
      bottom: -8px;
      left: 0;
      transform-origin: right;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
    }

    &:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    }
  }

  &:hover {
    background-position: 0 100%;
  }

  .mat-icon {
    margin-right: 10px;
  }
}

// tabs
::ng-deep mat-tab-header {
  .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label {
    color: #fff;
  }

  .mat-mdc-tab-list {
    flex-grow: initial;

    @media (max-width: $breakpoint-xs) {
      flex-grow: 1;
    }
  }

  .mat-mdc-tab-label-container {
    justify-content: flex-end;

    @media (max-width: $breakpoint-xs) {
      justify-content: flex-start;
    }
  }
}

swiper-container {
  margin-top: 30px;
}

::ng-deep .swiper-slide-visible:not(.swiper-slide-fully-visible) {
  opacity: 0.6;
}

::ng-deep .swiper-slide-active {
  opacity: 1 !important;
}

::ng-deep .mat-mdc-tab-label-container {
  border-bottom-color: transparent !important;
}

::ng-deep .mat-mdc-tab-body-wrapper {
  min-height: 415px;
}

swiper-slide {
  padding-bottom: 2rem;
}

@include media-query($breakpoint-xs) {
  .home-main-content {
    height: 250px;
    font-size: 2rem;
  }

  .movies__title,
  .shows__title {
    position: initial;
    padding-bottom: 10px;
    a {
      justify-content: center;
    }
  }
}

@include media-query($breakpoint-xs, $breakpoint-sm) {
  .home-main-content {
    height: 400px;
  }
}
