@use "../../../assets/scss/customVariables.scss" as *;

.carouselContainer {
  width: 100%;
  display: flex;
  flex-direction: center;
  justify-content: center;
  align-items: center;

 .leftButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:active {
      border: 0.5px solid #fafafa31;
      background-color: #e7e7e7;
      border-radius: 50%;
    }
  }
  .rightButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:active {
      border: 0.5px solid #fafafa31;
      background-color: #e7e7e7;
      border-radius: 50%;
    }
  }

  .carouselSlide {
    width: 100%;
    box-sizing: border-box;
    // height: 100px;
    padding: 15px;
    min-height: 289px;
    color: #fff;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-around;

    .error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  }

}
.dots {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 5px;

  .dot {
    width: 12px;
    height: 12px;
    background: #5E5E5E80;
    border-radius: 50%;
    margin-right: 5px;

    &__selected {
      width: 12px;
      height: 12px;
      background: #7a7a7a;
      border-radius: 2px;
      border-radius: 50%;
      margin-right: 5px;
      background: #5E5E5E;
    }
  }
}