@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

$sky-paging-modern-padding-top-bottom: 3px;

:host {
  display: block;
}

.sky-paging-content-wrapper {
  display: none;

  &:not(:empty) {
    display: block;
    margin-bottom: var(--sky-margin-stacked-lg);
  }

  &:focus-visible {
    outline: none;
    border: none;
  }
}

ul {
  margin: $sky-margin-plus-half 0 0 0;
  display: inline-block;
  padding-left: 0;
  border-radius: 4px;
}

li {
  display: inline;
}

.sky-paging-btn {
  @include mixins.sky-border(light, top, right, bottom, left);
  border-radius: 0;
  background-color: $sky-color-white;
  color: inherit;
  float: left;
  margin-left: -1px;
  padding: 4px 10px;
  text-decoration: none;
  line-height: $sky-line-height-base;
  font-size: $sky-font-size-base;
  cursor: pointer;

  &.sky-paging-caret {
    transform: none;
  }

  &.sky-paging-current,
  &.sky-paging-current:disabled,
  &.sky-paging-current[disabled] {
    background-color: $sky-background-color-neutral-light;
    cursor: default;
    color: inherit;
    opacity: 1;
  }

  &:hover {
    background-color: darken($sky-background-color-neutral-light, 10%);
  }

  &:disabled {
    color: $sky-text-color-deemphasized;
    cursor: not-allowed;
    pointer-events: none;
  }

  &.sky-paging-btn-previous,
  &.sky-paging-btn-next {
    padding-left: 8.5px;
    padding-right: 8.5px;
  }
}

@include mixins.sky-theme-modern {
  .sky-paging-btn {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: $sky-theme-modern-box-border-radius-default;
    margin-right: $sky-theme-modern-margin-inline-sm;
    padding: $sky-paging-modern-padding-top-bottom $sky-theme-modern-space-sm;

    &:hover {
      background-color: transparent;
      border: solid 1px $sky-theme-modern-background-color-primary-dark;
      padding: $sky-paging-modern-padding-top-bottom - 1
        $sky-theme-modern-space-sm - 1;
      z-index: 1;
    }

    &:active,
    &:focus {
      border: solid 2px $sky-theme-modern-background-color-primary-dark;
      color: $sky-text-color-default;
      padding: $sky-paging-modern-padding-top-bottom - 2
        $sky-theme-modern-space-sm - 2;
    }

    &:focus:not(:active) {
      outline: none;
      box-shadow: $sky-theme-modern-elevation-1-shadow-size
        $sky-theme-modern-elevation-1-shadow-color;
    }
  }

  .sky-paging-current {
    background-color: var(--sky-background-color-item-selected);
    border: solid 1px $sky-theme-modern-background-color-primary-dark;
    padding: 2px 9px;
  }
}

@include mixins.sky-theme-modern-dark {
  .sky-paging-btn {
    &:active,
    &:focus {
      color: $sky-theme-modern-mode-dark-font-body-default-color;
    }
  }

  .sky-paging-current {
    background-color: $sky-theme-modern-background-color-primary-dark;
  }
}
