/* stylelint-disable no-descending-specificity */
@use "@core/scss/template/mixins" as templateMixins;
@use "@configured-variables" as variables;

// 👉 Pagination
.v-pagination {
  // button size
  .v-pagination__next,
  .v-pagination__prev {
    .v-btn--icon {
      &.v-btn--size-small {
        .v-icon {
          font-size: 1rem;
        }
      }

      &.v-btn--size-default {
        .v-icon {
          font-size: 1.125rem;
        }
      }

      &.v-btn--size-large {
        .v-icon {
          font-size: 1.375rem;
        }
      }
    }
  }

  // common style for all components
  .v-pagination__item,
  .v-pagination__next,
  .v-pagination__last,
  .v-pagination__first,
  .v-pagination__prev {
    .v-btn {
      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
      font-weight: 400;
      line-height: 1;
      transform: none;

      &--size-default {
        --v-btn-size: 13px;
      }

      &--size-large {
        --v-btn-size: 15px;
      }

      &.v-btn--disabled {
        opacity: 0.45;
      }

      &--variant-tonal {
        .v-btn__underlay {
          --v-activated-opacity: 0.06;
        }

        &:hover {
          .v-btn__overlay {
            --v-hover-opacity: 0.1;
          }

          .v-btn__underlay {
            --v-activated-opacity: 0;
          }
        }
      }
    }
  }

  // Disable scale animation for button
  .v-pagination__item {
    .v-btn {
      transform: scale(1) !important;

      /* We disabled transition because it looks ugly 🤮 */
      transition-duration: 0s;

      &:active {
        transform: scale(1);
      }
    }
  }

  .v-pagination__list {
    @each $color-name in variables.$theme-colors-name {
      &:has(.v-pagination__item.v-pagination__item--is-active .v-btn.text-#{$color-name}) {
        .v-pagination__item {
          .v-btn {
            &:hover {
              color: rgb(var(--v-theme-#{$color-name})) !important;

              .v-btn__overlay {
                --v-hover-opacity: 0.16;

                background-color: rgb(var(--v-theme-#{$color-name}));
              }
            }
          }
        }
      }
    }

    .v-pagination__item--is-active {
      .v-btn {
        &:not([class*="text-"]) {
          color: rgb(var(--v-theme-primary));

          &:not(.v-btn--variant-outlined) {
            .v-btn__underlay {
              --v-activated-opacity: 0;
            }

            .v-btn__overlay {
              --v-border-opacity: 0.16;
            }

            &:hover {
              .v-btn__overlay {
                --v-hover-opacity: 0.16;
              }
            }
          }

          &.v-btn--variant-outlined {
            border-color: rgb(var(--v-theme-primary));

            .v-btn__overlay {
              --v-border-opacity: 0.16;
              --v-hover-opacity: 0.16;
            }
          }
        }

        // box-shadow
        @each $color-name in variables.$theme-colors-name {
          &:not(.v-btn--disabled) {
            &.text-#{$color-name} {
              &,
              &:hover,
              &:active,
              &:focus {
                @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");

                color: rgb(var(--v-theme-#{$color-name})) !important;
              }

              .v-btn__underlay {
                opacity: 1 !important;
              }

              .v-btn__content {
                color: #fff;
              }

              &.v-btn--variant-outlined {
                background-color: rgb(var(--v-theme-#{$color-name}));
              }
            }
          }
        }
      }
    }
  }
}
