@use "../variables";

.fwe-header-slider-container {
  .fwe-header-slider-box {
    height: 142px;
    background-color: variables.$hero;
  }

  .fwe-header-slider {
    margin-top: -28px;
    margin-left: 12px;
    margin-right: 12px;
  }
}

.fwe-header-slider {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  background-color: variables.$white;
  border-radius: variables.$border-radius-s;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);

  .fwe-header-slider-content {
    display: inline-flex;
    flex-direction: column;

    p {
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      margin: 0;
    }

    button.fwe-btn-hero {
      margin-top: 24px;
      justify-content: center;
      margin-left: 18px;
      margin-right: 18px;
    }
  }

  .fwe-pagination {
    align-self: center;
    margin-top: 24px;
  }

  .fwe-header-slider-arrow-left,
  .fwe-header-slider-arrow-right {
    display: none;
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-xs) {
  .fwe-header-slider-container {
    .fwe-header-slider-box {
      height: 166px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-sm) {
  .fwe-header-slider-container {
    .fwe-header-slider-box {
      height: 341px;
    }

    .fwe-header-slider {
      margin-top: -104px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-md) {
  .fwe-header-slider-container {
    .fwe-header-slider-box {
      height: 455px;
    }

    .fwe-header-slider {
      position: relative;
      margin-top: -104px;
    }
  }

  .fwe-header-slider {
    padding: 24px 112px;

    .fwe-header-slider-content {
      flex-direction: row;
      align-items: center;

      p {
        -webkit-line-clamp: 3;
      }

      button.fwe-btn-hero {
        justify-content: center;
        margin-top: 0;
        margin-left: 34px;
        margin-right: 0;
        min-width: 200px;
      }
    }

    .fwe-header-slider-arrow-left,
    .fwe-header-slider-arrow-right {
      display: block;
      position: absolute;
      top: 50%;
      margin-top: 12px;
      transform: translateY(-50%);
      height: 48px;
      width: 48px;
      font-size: 48px;
    }

    .fwe-header-slider-arrow-left {
      left: 24px;
    }

    .fwe-header-slider-arrow-right {
      right: 24px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-xl) {
  .fwe-header-slider-container {
    .fwe-header-slider-box {
      height: 640px;
    }

    .fwe-header-slider {
      margin: auto;
      margin-top: -104px;
      width: 1096px;
    }
  }

  .fwe-header-slider {
    padding: 24px 160px;
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-xxl) {
  .fwe-header-slider-container {
    .fwe-header-slider {
      width: 1192px;
    }
  }
}