@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

/* This helper includes styles relating to: box-shadow, border, transition, pointer, grouped css in one helper, and screen-reader only.*/

// box-shadow helpers
.has-only-top-shadow {
  box-shadow:
    0 -1px 0 -1px var(--token-color-palette-neutral-300),
    0 -2px 0 -1px var(--token-color-palette-neutral-300);
}

.is-shadowless {
  box-shadow: none !important;
}

.is-sideless {
  box-shadow:
    0 2px 0 -1px var(--token-color-palette-neutral-300),
    0 -2px 0 -1px var(--token-color-palette-neutral-300);
}

// this helper needs to go after is-sideless as they are often used together and is-bottomless needs to override is-sideless (no this is not ideal).
.is-bottomless {
  box-shadow: 0 -1px 0 0 var(--token-color-palette-neutral-300);
}

// border helpers
.has-default-border {
  border: 1px solid var(--token-color-palette-neutral-400) !important;
}

.is-borderless {
  border: none !important;
}

.has-border-collapse {
  border-collapse: collapse;
}

// pointer helpers
.has-no-pointer {
  pointer-events: none;
}

.has-pointer {
  cursor: pointer;
}

// other
.has-background-transition {
  transition: background-color ease-out size_variables.$speed;
}

.has-current-color-fill {
  &,
  & svg {
    fill: currentColor;
  }
}

.white-space-pre-line {
  white-space: pre-line;
}

// large grouped css blocks
.is-hint {
  color: var(--token-color-palette-neutral-400);
  font-size: size_variables.$size-8;
  padding: size_variables.$spacing-12 0;
}

.is-optional {
  color: var(--token-color-palette-neutral-400);
  font-size: size_variables.$size-8;
  text-transform: lowercase;
}

.is-word-break {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}

.overflow-wrap {
  overflow-wrap: break-word;

  &.word-break {
    word-break: break-word;
  }
}

.truncate-second-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.truncate-first-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.white-space-nowrap {
  white-space: nowrap;
}

// screen reader only
.sr-only {
  border: 0;
  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0px;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// border-radius
.border-radius-4 {
  border-radius: size_variables.$radius-large;
}

// border-spacing
.is-border-spacing-revert {
  border-spacing: revert;
}
