@use "src/styles/framework" as *;

time-selector {
  .p-carousel {
    .p-carousel-content {
      padding: 0px;
      height: $button-height + 1px;

      .p-carousel-container {
        padding: 0;
        height: 100%;

        .p-carousel-items-content {
          border-left: 1px solid $border;
          border-right: 1px solid $border;

          border-radius: 0 0 $border-radius $border-radius;
          background-color: $blue-extra-light;

          .sticky-panel--active & {
            border-top: 1px solid $border;
            border-radius: $border-radius;
          }

          .p-carousel-items-container {
            height: 100%;

            .p-carousel-item {
              height: 100%;
              position: relative;
              overflow: visible;

              &:after {
                content: '';
                position: absolute;
                top: 0px;
                right: -1px;
                bottom: 0px;
                width: 1px;
                background-color: $border;
              }

              button.tab-button {
                width: 100%;
                height: 100%;
                background-color: transparent;
                border-radius: 0px;
                border: none;
                cursor: pointer;
                position: relative;
                border-bottom: 1px solid $border;
                transition-duration: 0.2s;

                &:hover {
                  .p-button-label {
                    color: $text-color;
                  }
                }

                &--active {
                  background-color: $white !important;
                  border-bottom: 1px solid $white;
                  cursor: initial;

                  .p-button-label {
                    color: #333333 !important;
                  }

                  &:before {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: -1px;
                    bottom: 0px;
                    width: 1px;
                    background-color: $border;
                  }
                }

                .p-button-label {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-weight: $font-bold;
                  color: $blue;
                  font-size: $font-size-s;
                }
              }

              &:last-child {
                border-right: none;
              }
            }
          }
        }

        .p-carousel-prev,
        .p-carousel-next {
          margin: 0px;
          width: $button-height;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0px;
          border: none;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 7.41px 12px;
          position: relative;
          z-index: 100;

          &::before {
            content: '';
            position: absolute;
            top: 0px;
            background-size: cover;
            background-repeat: no-repeat;
            width: 21px;
            height: 100%;
          }
        }

        .p-carousel-prev.p-state-disabled,
        .p-carousel-next.p-state-disabled {
          &::before {
            display: none;
          }
        }

        .p-carousel-next {
          // margin-left: -1px;
          background-image: url('~src/assets/img/arrow-right.svg');
          border-radius: 0 $border-radius 0 0;

          &::before {
            left: -21px;
            background-image: url('~src/assets/img/tabs-shadow-right.svg');
          }
        }

        .p-carousel-prev {
          background-image: url('~src/assets/img/arrow-left.svg');
          border-radius: $border-radius 0 0 0;

          &::before {
            right: -21px;
            background-image: url('~src/assets/img/tabs-shadow-left.svg');
          }
        }
      }

      .p-carousel-dots-container {
        display: none;
      }
    }
  }
}
