@import './variables';
@import 'utilities/mixins';

.#{$framework-prefix}pg-list {
  $size: 27px;
  grid-template-columns: repeat(5, $size);
  justify-content: center;
  grid-gap: 12px;
  display: grid;
  button {
    @include btn-by-default;
    border: 1px solid currentColor;
    color: var(--border-default-color);
    background-color: var(--white);
    @include size($size);
    border-radius: 50%;
    &:hover {
      border-color: currentColor;
      color: var(--green);
    }
  }
  .active button {
    background-color: var(--green);
    color: var(--white);
    border: none;
  }
}