@import '../../../shared/scss/_selected_theme_variables.scss';
:host {
  ::ng-deep .banner {
    .bannerStyle {
      img {
        height: 350px;
        object-fit: cover;
        background-color:darken($theme-main-color, 25);
      }
      @media (max-width: 768px) {
        img {
          height: 150px;
          object-fit: cover;
        }
      }
    }
    .ngucarouselPoint {
      list-style-type: none;
      padding: 3px;
      white-space: nowrap;
      overflow: auto;
      position: relative;
      left: 0;
      box-sizing: border-box;
      background-color: $white;
      margin: 0 auto -28px;
      align-self: center;
      width: fit-content;
      border-radius: 5px 5px 0 0;
      bottom: 27px;
      cursor: pointer;
      @media (min-width: '768px') {
        bottom: 0;
      }
    }
    @media (min-width: '768px') {
      .ngucarouselPoint {
        bottom: 0;
      }
    }
    .ngucarouselPoint li {
      display: inline-block;
      border-radius: 999px;
      background-color: $theme-main-color;
      border: 1px solid $theme-main-color;
      padding: 5px;
      margin: 0 3px;
      transition: 0.4s ease all;
    }
    .ngucarouselPoint li.active {
      background-color: $white;
    }
  }
  .leftRs,
  .rightRs {
    position: absolute;
    cursor: pointer;
    margin: auto;
    top: -10%;
    bottom: 0;
    border: none;
    background-color: transparent;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 4rem;
    filter: drop-shadow(0 2px 2px #444);
    background-size: 3rem;
  }
  .leftRs {
    left: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }
  .rightRs {
    right: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }
  .myBannerPoint {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0;
    color: beige;
    justify-content: center;
    list-style-type: none;
    background: rgba(0, 0, 0, 0.34);
    margin: 0;
    padding: 10px;
    li {
      background: #6b6b6b;
      width: 50px;
      height: 50px;
      margin-right: 10px;
      &.active {
        transform: translateY(-10px);
        transition: 0.3s ease all;
      }
    }
  }
}
