// Hide
.is-hidden {
  display: none !important;
}

// Show
.is-visible {
  display: block !important;
}

// Show desktop only
.is-desktop {
  @include media("<md") {
    display: none !important;
    pointer-events: none;
    touch-action: none;
  }
}

// Show mobile only
.is-mobile {
  @include media(">=md") {
    display: none !important;
    pointer-events: none;
    touch-action: none;
  }
}

// Disabled state
.is-disabled {
  pointer-events: none;
  touch-action: none;
}

// Error state
.is-error {
  color: $color-error !important;
}

// Success state
.is-success {
  color: $color-success !important;
}

// Link appearance on hover
.is-link {
  cursor: pointer;
}