@import "./colors";

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

.cap--type-alpha {
  // Heading 1
  font-size: calculateRem(32px);
  line-height: calculateRem(40px);
  font-weight: 600;
}

.cap--type-beta {
  // Heading 2
  font-size: calculateRem(24px);
  line-height: calculateRem(32px);
  font-weight: 600;
}

.cap--type-gamma {
  // Heading 3
  font-size: calculateRem(20px);
  line-height: calculateRem(24px);
  font-weight: 600;
}

.cap--type-delta {
  // Heading 4
  font-size: calculateRem(16px);
  line-height: calculateRem(20px);
  font-weight: 600;
}

.cap--type-epsilon {
  // Heading 5
  font-size: calculateRem(14px);
  line-height: calculateRem(20px);
  font-weight: 600;
}

.cap--type-body {
  font-size: calculateRem(14px);
  line-height: calculateRem(20px);
  font-weight: 400;
}

.cap--type-specialty-body {
  font-size: calculateRem(16px);
  line-height: calculateRem(20px);
  font-weight: 400;
}

.cap--type-label {
  font-size: calculateRem(12px);
  line-height: calculateRem(16px);
  font-weight: 600;
}

.cap--type-input {
  font-size: calculateRem(14px);
  line-height: calculateRem(16px);
  font-weight: 400;
}

.cap--type-large {
  font-size: calculateRem(54px);
  line-height: calculateRem(68px);
  font-weight: 400;
}

.cap--type-data-viz--label {
  font-size: calculateRem(12px);
  line-height: calculateRem(14px);
  font-weight: 400;
}

body {
  background-color: $ui-01;
}

// IE hates EVERYONE.
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .cap-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(11px - 18px); // Offset by scrollbar size
    padding-right: 11px;
    @media (min-width: 62rem) {
      padding-left: calc(5vw - 18px); // Offset by scrollbar size
      padding-right: 5vw;
    }
  }
}

// safari 11+ detection.
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    // apparently, this was being beat for specificity despite above media queries
    div.cap-grid > * {
      height: auto;
    }
  }
}

// Some overrides that should be merged into carbon-components
.bx--data-table-v2-container {
  min-width: 100%;

  .bx--data-table-v2 {
    min-width: 31.25rem;
  }
}

// Some overrides to support datepicker in iOS
@supports (-webkit-overflow-scrolling: touch) {
  .bx--date-picker__input.flatpickr-input.flatpickr-mobile {
    display: flex;
    justify-content: flex-end;
  }
}