@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/design-tokens/sass/typography";
@import "~@kaizen/design-tokens/sass/color";
@import "../../variables";

$label-start-margin: $spacing-xs;

.label,
:global(.ideal-sans) .label {
  // override Murmur global styles :(
  opacity: inherit;
  color: $dt-color-form-text-color;
  visibility: visible;
  width: 100%;
  text-align: left; // fallback for IE and Edge
  text-align: start;

  &[dir="rtl"],
  [dir="rtl"] & {
    text-align: right; // fallback for IE and Edge
    text-align: start;
  }
}

.reversed {
  color: $color-white;

  a {
    color: $color-white;

    &:hover {
      text-decoration: none;
    }
  }
}

.disabled {
  opacity: 30%;
}

///////////////////////////////////////////////////
// LABEL TYPES
///////////////////////////////////////////////////

// This is to override bootstrap styles. Remove when appropriate
.text,
:global(.ideal-sans) .text {
  font-family: $typography-heading-6-font-family;
  font-size: $typography-heading-6-font-size;
  line-height: $typography-heading-6-line-height;
  letter-spacing: $typography-heading-6-letter-spacing;
  font-weight: $typography-heading-6-font-weight;
}

%checkboxOrRadio,
:global(.ideal-sans) %checkboxOrRadio {
  display: flex;
  font-family: $typography-paragraph-body-font-family;
  font-size: $typography-paragraph-body-font-size;
  line-height: $typography-paragraph-body-line-height;
  letter-spacing: $typography-paragraph-body-letter-spacing;
  font-weight: $typography-paragraph-body-font-weight;
}

.checkbox {
  @extend %checkboxOrRadio;
}

.radio {
  @extend %checkboxOrRadio;
}

.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: $typography-paragraph-body-font-family;
  font-size: $typography-paragraph-body-font-size;
  line-height: $typography-paragraph-body-line-height;
  letter-spacing: $typography-paragraph-body-letter-spacing;
  font-weight: $typography-paragraph-body-font-weight;
}

.checkbox,
.radio,
.toggle {
  // apply padding when label is inline with form control
  .prependedLabel {
    order: -1; // place label before the control
    margin-right: $label-start-margin;
    margin-left: 0;

    &[dir="rtl"],
    [dir="rtl"] & {
      margin-right: 0;
      margin-left: $label-start-margin;
    }
  }

  .appendedLabel {
    margin-right: 0;
    margin-left: $label-start-margin;

    &[dir="rtl"],
    [dir="rtl"] & {
      margin-right: $label-start-margin;
      margin-left: 0;
    }
  }
}

.prominent {
  font-family: $typography-heading-4-font-family;
  font-weight: $typography-heading-4-font-weight;
  font-size: $typography-heading-4-font-size;
  line-height: $typography-heading-4-line-height;
  letter-spacing: $typography-heading-4-letter-spacing;
  display: block;
  margin-bottom: $spacing-xs;
}