@use "variables";

.fwe-pagination {
  display: flex;

  .fwe-navigate-btn {
    &::before {
      content: "";
      height: 24px;
      width: 24px;
      background-color: variables.$text;
    }

    line-height: normal;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    text-align: center;
    font-family: variables.$font-family-base;
    padding: 0px;
    height: 24px;
    width: 24px;
    background: transparent;
    cursor: pointer;
    border: none;

    &:hover {
      &::before {
        background-color: variables.$hero;
      }
    }

    &:active {
      &::before {
        background-color: variables.$hero-hover;
      }
    }

    &:focus {
      outline: 0;
    }

    &:disabled,
    &.fwe-disabled {
      cursor: default;

      &::before {
        background-color: variables.$text-disabled;
      }
    }
  }

  .fwe-navigate-btn-up {
    @extend .fwe-navigate-btn;

    &::before {
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
    }
  }

  .fwe-navigate-btn-down {
    @extend .fwe-navigate-btn;

    &::before {
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
    }
  }

  .fwe-page-dot {
    cursor: pointer;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 9px 4px;
    background: variables.$control-border;
    border-radius: 50%;

    &:hover {
      background: variables.$control-border-hover;
    }

    &.fwe-selected {
      background: variables.$hero;
      cursor: default;
    }
  }

  .fwe-page-current {
    font-feature-settings: variables.$font-feature-settings;
    font-weight: variables.$font-weight-bold;
    border-right: 1px solid variables.$text;
    padding: 0px 12px 0px 4px;
  }

  .fwe-page-max {
    font-feature-settings: variables.$font-feature-settings;
    line-height: 24px;
    padding: 0px 4px 0px 12px;
    font-weight: variables.$font-weight-normal;
  }
}

.fwe-pagination.fwe-pagination--on-dark-bg {
  .fwe-navigate-btn-down {
    &::before {
      background-color: variables.$white;
    }
  }

  .fwe-navigate-btn-up {
    &::before {
      background-color: variables.$white;
    }
  }

  .fwe-page-current {
    color: variables.$white;
    border-right: 1px solid variables.$white;
  }

  .fwe-page-max {
    color: variables.$white;
  }
}