@use "sass:list";

// Headline
h1,
.ui-h1,
h2,
.ui-h2,
h3,
.ui-h3,
h4,
.ui-h4 {
  display: block;
  word-wrap: break-word;
  color: $color-gray-00;
  text-transform: none;
}

h1,
.ui-h1 {
  font-size: $font-size-heading-2;
  line-height: $line-height-heading-2;
  font-weight: $font-weight-heading-2;
}

h2,
.ui-h2 {
  font-size: $font-size-heading-3;
  line-height: $line-height-heading-3;
  font-weight: $font-weight-heading-3;
}

h3,
.ui-h3 {
  font-size: $font-size-heading-4;
  line-height: $line-height-heading-4;
  font-weight: $font-weight-heading-4;
}

h4,
.ui-h4 {
  font-size: $font-size-heading-5;
  line-height: $line-height-heading-5;
  font-weight: $font-weight-heading-5;
}

.ui-subtitle {
  display: block;
  word-wrap: break-word;
  font-size: $font-size-m;
  line-height: 18px;
  font-weight: $font-weight-l;
  color: $color-gray-00;
  text-transform: uppercase;
}

// Copy
body,
select,
input,
button,
textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: $font-family;
  font-feature-settings: "salt";
  font-style: normal;
  font-size: $font-size-body-regular;
  line-height: $line-height-body-regular;
  color: $color-gray-02;
}

small,
.ui-small {
  font-size: $font-size-detail-default;
}

strong,
.ui-strong {
  font-weight: $font-weight-detail-bold;
}

// Link
a,
.ui-link {
  color: $color-base-01;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;

  &:visited {
    color: $color-base-01;
  }

  &:active,
  &:hover {
    color: $color-gray-01;
  }

  &.is-disabled {
    color: $color-gray-05;
    cursor: auto;
  }
}

// Label
.ui-label {
  color: $color-gray-00;
  font-size: 12px;
  line-height: 15px;
  font-style: normal;
  user-select: none;
}

.ui-label-primary {
  color: $color-gray-02;
  font-size: $font-size-body-regular;
  line-height: $line-height-body-regular;
}

// Error
.ui-error {
  display: block;
  color: $color-red-00;
  font-size: $font-size-body-regular;
  line-height: $line-height-body-regular;
  font-style: normal;
}

// Success message
.ui-success {
  display: block;
  color: $color-green-02;
  font-size: $font-size-body-regular;
  line-height: $line-height-body-regular;
  font-style: normal;
}

.ui-text-dark {
  color: $color-gray-00;
}

.ui-text-light {
  color: $color-gray-03;
}

.ui-text-success {
  color: $color-green-02;
}

.ui-text-error {
  color: $color-red-00;
}