%btn {
    height: 3rem;
    min-width: 3rem;
    border-radius: $border-small; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: $sand2;
    position: relative;
    transition: all $short-fade;
    &:hover {
      background-color: $accent;
    }
    &:active,
    &--active {
        background-color: $sand2;
      }
    &:disabled {
      cursor: not-allowed;
      &:hover {
        background-color: inherit;
      }
    }
  }
  
  //general additional styles for all buttons
  .btn {
    @extend %btn; 
    &--primary { 
      background-color: $sand3;
    }
    &--outline {
      border: 3px solid $sand3;
    }
    &--ghost {
      color: $body-lightest;
      background-color: $sand2;
    }
    &--inline {
        background-color: inherit;
     }
    &--warning{
        color: $error;
        background-color: $error-light; 
        &:hover {
          background-color: $error-light; 
        }
      }
  }
  
  //LONG BUTTON
  .CTA { 
    min-width: 6rem;
    padding: 0 0.5rem;
    border: 3px solid transparent;
  }