@use 'sass:map';
@use 'sass:color';


@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;


#{getClassName((pagination))} {
  font-size: #{getValName((pagination, font-size))};
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .hd, .bd, .ft {
    display: inline-flex;
    align-items: center;
    padding: #{getValName((space, xs))} #{getValName((space, none))};
  }
  [class*="os-pagination-"] + [class*="os-pagination-"] {
    margin-left: #{getValName((pagination, gap))};
  }
  #{getClassName((dropdown))} {
    &.is-open {
      #{getClassName((icon, down))} {
        transform: rotate(180deg);
        transform-origin: center;
      }
    }
  }
  #{getClassName((dropdown, btn))} {
    color: #{getValName((pagination, button-color))};
    background-color: #{getValName((pagination, button-background-color))};
    height: 2.2em;
    padding: .6em .6em;min-width: 2em;
    #{getClassName((icon, down))} {
      transition: .2s all;
      margin-left: #{getValName((space, s))};
    }
  }
}

#{getClassName((pagination, ul))} {
  list-style: none;
  padding: 0;margin: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  li {
    border-radius: 4px;
    list-style: none;
    line-height: 1;
    height: 2.2em;
    padding: .6em .3em;min-width: 2em;margin: 0 2px;text-align: center;
    cursor: pointer;
    color: #{getValName((pagination, button-color))};
    background-color: #{getValName((pagination, button-background-color))};
    &:hover {
      color: #{getValName((pagination, button-hover-color))};
      background-color: #{getValName((pagination, button-hover-background-color))};
    }
    &.is-active {
      color: #{getValName((pagination, button-active-color))};
      background-color: #{getValName((pagination, button-active-background-color))};
    }
    &[disabled="true"] {
      cursor: not-allowed;
      pointer-events: none;
      opacity: .4;
    }
  }
}

#{getClassName((pagination, jump))} {
  margin: 0 2px;
  display: inline-flex;
  align-items: center;
  input {
    width: 2.2em;padding-left: .5em;padding-right: .5em;margin-left: 4px;text-align: center;
  }
}


#{getClassName((pagination))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    pagination,
    (
      'font-size': (heading8),
      'button-color': (color, neutral, 9),
      'button-background-color': (color, neutral, 1),
      'button-hover-color': (color, primary),
      'button-hover-background-color': (color, neutral, 1),
      'button-active-color': (color, neutral, 1),
      'button-active-background-color': (color, primary),
      'gap': (space, base)
    )
  )
}


#{getClassName((pagination, large))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    pagination,
    (
      'font-size': (heading7),
    )
  )
}
#{getClassName((pagination, mini))} {
  // #{joinValName((notify, box-shadow))}: 0px 3px 12px rgba(0, 0, 0, 0.12);
  @include set-css-val(
    pagination,
    (
      'font-size': (heading9),
    )
  )
}