.Schedule-daysContainer {
  position: relative;
  overflow: hidden;
}

.Schedule-days {
  position: relative;
  display: flex;
  gap: var(--spaces);
  overflow-x: auto;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.Schedule-days::-webkit-scrollbar {
    display: none;
  }

.Schedule-days .Day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spaces) calc(var(--spaces) * 2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    scroll-snap-align: start;
  }

.Schedule-days .Day.has-performances {
      border-color: var(--clr-white);
      color: var(--clr-white);
    }

.Schedule-days .Day.is--selected {
      position: relative;
      border-color: var(--clr-secondaryGreen);
      background-color: var(--clr-secondaryGreen);
      color: var(--clr-black);
    }

.Schedule-days .Day-clear {
    position: absolute;
    top: calc(var(--spaces) / 2);
    right: calc(var(--spaces) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spaces);
    height: var(--spaces);
    border: 1px solid var(--clr-red);
    border-radius: 50%;
    cursor: pointer;

    svg {
      width: calc(var(--spaces) / 2);
      fill: var(--clr-red);
    }
  }

.Schedule-days .Day-date {
    font-size: 1.75rem;
  }

.Scroll-handler {
  position: absolute;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spaces) * 3);
  height: 100%;
  background: linear-gradient(to left, rgba(168, 7, 45, 0), rgba(168, 7, 45, 1));
  cursor: pointer;
}

.Scroll-handler.is--hidden {
    display: none;
  }

.Scroll-handler svg {
    fill: var(--clr-white);
  }

.Scroll-handler--left {
  left: 0;
}

.Scroll-handler--right {
  right: 0;
  background: linear-gradient(to right, rgba(168, 7, 45, 0), rgba(168, 7, 45, 1));
}