Page Comparison

border: 1px solid var(--color-default);
  background-color: var(--color-white);
  color: var(--color-default);



 &:hover:hover{
      border-color: var(--color-default);
      background-color: var(--color-default);
      color: var(--color-text-white);
  }

  &:active, &[aria-pressed="true"]{
      @extend %pressed;
 
    background-color: var(--color-default-dark);
      color: var(--color-text-white);
  }

  &:disabled, &[aria-disabled="true"]{
      pointer-events: none;
      opacity: 0.4;

 }


 &:focus{

   border: 3px solid var(--color-focus);
    background: var(--color-focus);
    color: var(--color-text-white);

    &:hover{
      background: initial;
    }

 }