@use "sass:math";
@import "./variables/_variables.scss";
@import "./ariakit_combobox";
@import "./form";

.sr-only {
  display: none;
}

[aria-disabled="true"] {
  input,
  label {
    color: $bsr-black-40;
    border-color: $bsr-black-40;
    pointer-events: none;
  }
  input {
    background: $bsr-black-10;
  }
}

body {
    font-family: $fontfamily-base;
    font-size: $defaultBrowserFontSize;
}

p, span {
    font-family: $fontfamily-base;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: $fontfamily-heading;
    color: $bsr-black-90;
    font-weight: $fontweight-bold;
    scroll-margin-top: $base-gap * 18;
}

h1, .h1 {
    font-size: $h1-fontsize;
    line-height: $h1-lineheight;
    letter-spacing: $letter-spacing-lg;
    margin-bottom: $base-gap * 10;

    @media screen and (max-width: $screen-sm-max) {
        font-size: $h1-fontsize-sm;
        line-height: $h1-lineheight-sm;
        letter-spacing: $letter-spacing-sm;
        margin-bottom: $base-gap * 3;
    }
}

h2, .h2 {
    font-size: $h2-fontsize;
    line-height: $h2-lineheight;
    letter-spacing: $letter-spacing-md;
    margin-bottom: $base-gap * 5;

    @media screen and (max-width: $screen-sm-max) {
        font-size: $h2-fontsize-sm;
        line-height: $h2-lineheight-sm;
        margin-bottom: $base-gap * 3;
    }
}

h3, .h3, h4, .h4,  h5, .h5, h6, .h6 {
    margin-bottom: $base-gap * 5;
    margin-top: $base-gap * 10;
    color: $bsr-black-90;

    @media screen and (max-width: $screen-sm-max) {
        font-size: $h3-fontsize-sm;
        line-height: $h3-lineheight-sm;
        margin-bottom: $base-gap * 3;
        margin-top: $base-gap * 8;
    }
}

q {
    font-family: $fontfamily-heading;
}

footer {
    font-family: $fontfamily-heading;
}

.rbc-wrapper .rbc-calendar {
    font-family: $fontfamily-base;
}

.rbc-date-cell.rbc-now span {
    color: $bsr-brick-100;
}