@layer components {
  /*
   * Page options
   */
  
  .page-options {
    position: absolute;
    left: 3.125rem;
    top: 1.6rem;
  
    @media (max-width: 1439.98px) {
      left: 2.625rem;
    }
  
    @media (max-width: 991.98px) {
      left: 1.125rem;
    }
  
    @media (max-width: 639.98px) {
      left: 0.375rem;
      top: 1rem;
    }
  
    .page-option-btn {
      align-items: center;
      border: 1px solid transparent;
      color: var(--color-primary);
      cursor: pointer;
      display: inline-flex;
      font-size: 1rem;
      height: 2.25rem;
      justify-content: center;
      margin: 0;
      padding: 0;
      text-decoration: none;
      width: 2.25rem;
      z-index: 10;
      -webkit-appearance: none;
      -moz-appearance: none;
      transition: 0.2s ease;
  
      &:focus {
        outline: none;
      }
  
      &:hover {
        color: var(--color-primary-darker);
        text-decoration: none;
      }
    }
  }
}