@use "../tokens/color";

@layer utilities {
  .border-radius--medium {
    border-radius: 10px;
  }

  .border {
    border: 2px solid var(--color-border-contrast);

    &.is-invalid {
      border-color: var(--color-border-negative) !important;
    }
  }

  .border--gray {
    border-color: var(--color-border-subtle);

    &.border-hover,
    &.is-indicating {
      &:hover {
        border-color: var(--color-text-secondary);
      }
    }
  }

  .border--orange {
    border-color: var(--color-border-accent);
  }
}