@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/type";
@import "~@cultureamp/kaizen-component-library/styles/layout";

$label-start-padding: 10px;

// -----------------------------------------------
// Form Control Label Primitive
// -----------------------------------------------

.label,
:global(.ideal-sans) .label {
  // override Murmur global styles :(
  opacity: inherit;
  color: $kz-color-wisteria-800;
  visibility: visible;
  @include ca-type-align-start;
  width: 100%;
}

.reversed {
  color: $kz-color-white;
}

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

// This is to override bootstrap styles. Remove when appropriate
.text,
:global(.ideal-sans) .text {
  @include ca-type-ideal-label;
  @include ca-inherit-baseline;
}

%checkboxOrRadio,
:global(.ideal-sans) %checkboxOrRadio {
  @include ca-type-ideal-body;
  @include ca-inherit-baseline;
  display: flex;

  .labelText {
    @include ca-padding($start: $label-start-padding);
    transform: translateY(-0.11em); // optically centre label
  }
}
.checkbox {
  @extend %checkboxOrRadio;
}
.radio {
  @extend %checkboxOrRadio;
}
.toggle {
  @include ca-type-ideal-body-bold;
  @include ca-inherit-baseline;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .labelText {
    @include ca-padding($end: $label-start-padding);
    order: -1; // place label before the control
  }
}