@use "src/styles/variables" as vars;
@use "src/styles/colors";
@use "src/styles/screen";

@mixin prevIcon($url) {
  display: flex !important;

  &::before {
    content: "";

    width: 24px;
    height: 24px;

    background-image: $url;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &::after {
    content: "";

    position: absolute;

    width: 25px;
    height: 48px;

    opacity: 0.5;
  }
}

.date-tabs {
  @include screen.mobile {
    display: none;
  }

  ::ng-deep .p-carousel-content {
    padding: 0;
  }

  ::ng-deep .p-carousel-indicators {
    display: none;
  }

  ::ng-deep .p-carousel-next,
  ::ng-deep .p-carousel-prev {
    margin: 0 !important;
    width: 50px;
    max-height: 48px;

    border: none !important;
    opacity: 1 !important;
  }

  ::ng-deep .p-carousel-next {
    border-radius: 0 vars.$border-radius 0 0 !important;

    &.p-state-disabled {
      .p-carousel-next-icon {
        &::before {
          opacity: 0.5;
        }
      }
    }
  }

  ::ng-deep .p-carousel-prev {
    border-radius: vars.$border-radius 0 0 0 !important;

    &.p-state-disabled {
      .p-carousel-prev-icon {
        &::before {
          opacity: 0.5;
        }
      }
    }
  }

  ::ng-deep .p-carousel-prev-icon.pi-chevron-left {
    @include prevIcon(url("~src/assets/img/arrow-left.svg"));

    &::after {
      right: -25px;
      background: transparent linear-gradient(270deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
      z-index: 1000;
    }
  }

  ::ng-deep .p-carousel-next-icon.pi-chevron-right,
  ::ng-deep .p-carousel-prev-icon.pi-chevron-right {
    @include prevIcon(url("~src/assets/img/arrow-right.svg"));

    &::after {
      left: -25px;
      background: transparent linear-gradient(90deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
    }
  }
}

.date-select {
  @include screen.gt-mobile {
    display: none;
  }
}
