/* --------------------------------------------------------------------------
 * Components
 *
 * Table of Contents
 *
 *   * Button
 *     * Primary
 *     * Secondary
 *     * Link
 *     * Link-text
 *   * Button Icon
 *   * Button Toolbar
 *   * Checkbox
 *   * Input
 *   * Autocomplete
 *   * select
 *   * select-with-filter
 *   * Table
 *   * Textarea
 *   * Alert
 *   * Swatch
 *   * Typography
 *     * inline code
 *     * yas-markdown
 *   * Chart
 *     * Bar Chart
 * --------------------------------------------------------------------------*/

:root {
  --font-family:         "Roboto", sans-serif;
  --font-style:          normal;
  --font-weight-thin:    100;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* colors - neutrals - darkest to lightest */
  --yas-black:   hsl(179deg, 100%, 0%);
  --yas-blue-16: hsl(209deg, 61%, 16%);
  --yas-blue-23: hsl(211deg, 39%, 23%);
  --yas-blue-30: hsl(209deg, 34%, 30%);
  --yas-blue-39: hsl(209deg, 28%, 39%);
  --yas-blue-49: hsl(210deg, 22%, 49%);
  --yas-blue-60: hsl(209deg, 23%, 60%);
  --yas-blue-70: hsl(211deg, 27%, 70%);
  --yas-blue-80: hsl(210deg, 31%, 80%);
  --yas-blue-89: hsl(212deg, 33%, 89%);
  --yas-blue-96: hsl(210deg, 36%, 96%);
  --yas-white:   hsl(0deg, 0%, 100%);
  --yas-white-96: hsl(30deg 0% 96%); /* light gray */

  /* colors - supporting */
  --yas-red:     hsl(0deg 92% 64%);
  --yas-green:   hsl(140deg 52% 55%);
  --yas-yellow:  hsl(54deg 77% 74%);

  /* components */
  --yas-input-border:       var(--yas-blue-89);
  --yas-input-border-hover: var(--yas-blue-30);
  --yas-input-border-focus: var(--yas-blue-16);
  --yas-input-border-disabled: var(--yas-blue-90);
  --yas-input-background-color-disabled: var(--yas-blue-96);
  --yas-input-color-disabled:  var(--yas-blue-90);
}


/* typography begins here */
body {
  font-size: 16px; /* 16px = 1rem */
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzQdL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzwdL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzMdL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz8dL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz4dL-vwnYh2eg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc3CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc-CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc2CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc5CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc1CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc0CsTYl4BOQ3o.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc6CsTYl4BO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------------------
 * button
 *
 * Originally, I had a concept of `yas-btn:reset` which is the idea that you
 * might want to strip a component of button styles completley, but not inherit
 * any additional styles.  Thus, you could put these resets on a base dom
 * element like `a`, `button`.  Revisiting this though, if you have a `yas-btn`
 * which does all this + applies some base styles, but the user can easily
 * unset them (because we allow them to) that is probably the better option
 * as I've yet to run into a scenario where the reset is the only thing I want.
 *
 * This approach to themeing is based on
 *
 *  * https://piccalil.li/blog/how-were-approaching-theming-with-modern-css/
 *  * https://piccalil.li/blog/how-i-build-a-button-component/
 *
 * The wins are we only have to specify the rules for the btn and btn states
 * once and then we can easily overwrite per project.
 *
 * Careful with zeroing out the margin/padding
 * ------------------------------------------------------------------------- */

.yas-btn {
  /* configuration
   * -----------------------------------------------------------------------*/
  --button-color:                      var(--yas-white);
  --button-color-hover:                var(--yas-white);
  --button-color-disabled:             var(--yas-blue-16);
  --button-background-color:           var(--yas-blue-23);
  --button-background-color-hover:     var(--yas-blue-30);
  --button-background-color-active:    var(--yas-blue-39);
  --button-background-color-disabled:  var(--yas-blue-89);
  --button-border-color:               var(--yas-blue-23);
  --button-border-color-focus:         var(--yas-input-border-focus);
  --button-border-color-active:        var(--yas-blue-39);
  --button-border-color-disabled:      var(--yas-blue-89);
  --button-border-radius:              4px;
  --button-border-radius-focus:        var(--button-border-radius);
  --button-border-top-right-radius:    var(--button-border-radius);
  --button-border-bottom-right-radius: var(--button-border-radius);
  --button-border-top-left-radius:     var(--button-border-radius);
  --button-outline-offset-focus:       3px;
  --button-box-shadow-color-1-focus:   var(--yas-white);
  --button-box-shadow-color-2-focus:   var(--yas-input-border-focus);;
  --button-padding-top:                0.5rem;
  --button-padding-right:              1rem;
  --button-padding-bottom:             0.5rem;
  --button-padding-left:               1rem;


  /* layout
   * -----------------------------------------------------------------------*/
  /* @note layout icons + texts */
  display: flex;
  align-items: center;
  padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
  /* @note with flex context, buttons take up all available space.  This keeps
   * the button width confined to their content by default */
  width: fit-content;
  /* @note  relative to support the loading icon + loading animations */
  position: relative;
  max-height: fit-content;

  /* typography
   * -----------------------------------------------------------------------*/
  font: inherit;
  line-height: 1;
  text-decoration: none;

  /* colors
   * -----------------------------------------------------------------------*/
  color: var(--button-color);
  background-color: var(--button-background-color);

  /* stroke and radius
   * -----------------------------------------------------------------------*/
  border-radius: var(--button-border-radius);
  border: 1px solid var(--button-border-color);

  /* interactive
   * -----------------------------------------------------------------------*/
  cursor: pointer;

  /* @note we have word-break on the css resets hence this, but it's mainly a
   * problem for icon + button */
  word-break: normal;
}

.yas-btn:hover {
  color: var(--button-color-hover);
  border-color: var(--button-border-color-hover);
  background-color: var(--button-background-color-hover);
}

.yas-btn:focus {
  outline: none;
  border-radius: var(--button-border-radius-focus, --button-border-radius);
  /* the third position created space between the btn and the focus effect if
   * desired.
   * */
  box-shadow: 0px 0px 0px 0px var(--button-box-shadow-color-1-focus), 0px 0px 0px 2px var(--button-box-shadow-color-2-focus);
  /* @note this is required for the scenario where you have a button focused
   * and the mouse hovers over the btn to the focused button's left or right
   * and we don't want the hover effect to overlay the focus effect. */
  z-index: 1;
}

.yas-btn:active,
.yas-btn[aria-pressed=true] {
  --button-border-color: var(button-border-color-active);
  --button-background-color: var(--button-background-color-active);
}

.yas-btn:disabled {
  color: var(--button-color-disabled);
  background-color: var(--button-background-color-disabled);
  border-color: var(--button-border-color-disabled);

  /* interactive */
  cursor: not-allowed;
}

.yas-btn[data-button-variant="primary"] {
  --button-background-color:        var(--yas-blue-30);
  --button-background-color-hover:  var(--yas-blue-23);
  --button-background-color-active: var(--yas-blue-39);
  --button-border-color:            var(--yas-blue-23);
  --button-border-color-hover:      var(--yas-blue-30);
  --button-border-color-focus:      var(--yas-blue-30);
  --button-border-color-active:     var(--yas-blue-29);
}

.yas-btn[data-button-variant="secondary"] {
  --button-color:               var(--yas-blue-16);
  --button-border-color:        var(--yas-blue-23);
  --button-border-color-hover:  var(--yas-blue-30);
  --button-border-color-active: var(--yas-blue-39);
  --button-background-color:    var(--yas-white);
}

.yas-btn[data-button-variant="link"] {
  --button-color:                  var(--yas-blue-23);
  --button-color-hover:            var(--yas-blue-16);
  --button-border-color:           transparent;
  --button-border-color-hover:     transparent;
  --button-background-color:       transparent;
  --button-background-color-hover: transparent;
}

.yas-btn[data-button-variant="link-text"] {
  --button-color:                  var(--yas-blue-23);
  --button-color-hover:            var(--yas-blue-16);
  --button-border-color:           transparent;
  --button-border-color-hover:     transparent;
  --button-background-color:       transparent;
  --button-background-color-hover: transparent;
  --button-border-radius-focus:    1px;
  --button-outline-offset-focus:   1px;

  /* layout */
  text-decoration: underline;
  display: inline;
}

/* ----------------------------------------------------------------------------
 * button icon
 * --------------------------------------------------------------------------*/
.yas-btn-icon {
  padding: 0.6rem 0.6rem;
}

.yas-btn-icon--link\:current-page svg {
  background-color: var(--yas-black);
  stroke: var(--yas-white);
}

.yas-btn-icon-loading {
  position: absolute;
  opacity: 0;
  left: 8px;
  transition: opacity .3s;
  transition-timing-function: ease-in-out;
}

.yas-btn-loading .yas-btn-icon-loading {
  opacity: 1;
}


/* ----------------------------------------------------------------------------
 * button toolbar
 *
 * This is a separate component from the button component because it requires
 * a decent amount of custom css rules so instead of having the user have to
 * specify n different classes, we'll define one upfront and allow the user
 * to customize the one just like we do with the button component.
 *
 * The moment a component needs custom css rules to change how it looks
 * completley I would, at this time, argue that is a decent indicator that it
 * is now a separate component and can have it's own configurations. This
 * component is a decent example of that happening.  The tricky part here is
 * separating the "structural requirements" (things we don't want to let the
 * user configure) and the actual configurable parts.
 * ------------------------------------------------------------------------- */

.yas-button-toolbar-group .yas-btn {
  --button-toolbar-color:                    var(--yas-blue-30);
  --button-toolbar-color-hover:              var(--yas-white);
  --button-toolbar-color-active:             var(--yas-blue-96);
  --button-toolbar-background-color:         var(--yas-white);
  --button-toolbar-background-color-hover:   var(--yas-blue-30);
  --button-toolbar-background-color-active:  var(--yas-blue-23);
  --button-toolbar-border-color:             var(--button-toolbar-background-color-hover);
  --button-toolbar-border-color-hover:       var(--button-toolbar-background-color-hover);
  --button-toolbar-border-color-active:      var(--yas-blue-23);
  /* anchor is the first/last children */
  --button-toolbar-anchor-border-radius:     2px;
  --button-toolbar-box-shadow-color-1-focus: var(--yas-white);
  --button-toolbar-box-shadow-color-2-focus: var(--yas-blue-96);

  color: var(--button-toolbar-color);
  background-color: var(--button-toolbar-background-color);
}


.yas-button-toolbar-group .yas-btn:hover {
  color: var(--button-toolbar-color-hover);
  background-color: var(--button-toolbar-background-color-hover);
  border: 1px solid var(--button-toolbar-border-color-hover);
  border-radius: 0;
}
.yas-button-toolbar-group .yas-btn {
  border-right-color: transparent;
  border-radius: 0;
}


.yas-button-toolbar-group .yas-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--button-toolbar-anchor-border-radius);
  border-bottom-left-radius: var(--button-toolbar-anchor-border-radius);
  border-right: 1px solid transparent;
}
.yas-button-toolbar-group .yas-btn:last-child {
  border-top-right-radius: var(--button-toolbar-anchor-border-radius);
  border-bottom-right-radius: var(--button-toolbar-anchor-border-radius);
  /* @note guard against the scenario where there are only two btns in the
   * group making this one the "even" btn - we don't want to strip the border
   * in this case */
  border-right: 1px solid var(--yas-blue-23);
}


.yas-button-toolbar-group .yas-btn:focus {
  outline: none;
  outline-offset: 3px;
  box-shadow: 0px 0px 0px 0px var(--button-toolbar-box-shadow-color-1-focus), 0px 0px 0px 2px var(--button-toolbar-box-shadow-color-2-focus);
  /* @note this is required for the scenario where you have a button focused
   * and the mouse hovers over the btn to the focused button's left or right
   * and we don't want the hover effect to overlay the focus effect. */
  z-index: 1;
}

/* @note re-add the border for focus because it looks better */
.yas-button-toolbar-group .yas-btn:first-child:focus {
  border-right: 1px solid var(--yas-black);
  border-radius-left: var(--button-toolbar-anchor-border-radius);
}
.yas-button-toolbar-group .yas-btn:first-child:focus {
  border-radius-right: var(--button-toolbar-anchor-border-radius);
}

.yas-button-toolbar-group .yas-btn[aria-pressed=true],
.yas-button-toolbar-group .yas-btn[aria-current=true] {
  color: var(--button-toolbar-color-active);
  background-color: var(--button-toolbar-background-color-active);
  border-color: var(--button-toolbar-border-color-active);
}



/* list-item
 * ------------------------------------------------------------------------- */

.yas-list {
}

.yas-list-item {
  position: relative;
}

/* @note because after a 6 deep nest it's like, may God have mercy on your soul */
.yas-list-item[data-nest-level="1"] {
  margin-left: calc(1.3rem);
}
.yas-list-item[data-nest-level="2"] {
  margin-left: calc(1.3rem * 2);
}
.yas-list-item[data-nest-level="3"] {
  margin-left: calc(1.3rem * 4);
}
.yas-list-item[data-nest-level="4"] {
  margin-left: calc(1.3rem * 6);
}
.yas-list-item[data-nest-level="5"] {
  margin-left: calc(1.3rem * 8);
}
.yas-list-item[data-nest-level="6"] {
  margin-left: calc(1.3rem * 10);
}

.yas-list-item-content {
  display: block;
  width: auto;
  cursor: pointer;
}

.yas-list-item-content:focus {
  outline: 2px solid var(--yas-blue-16);
  outline-offset: 3px;
}

/* @todo these are magic numbers.  Fix. */
.yas-list-item-sub-content {
  position: absolute;
  top: 4px;
  left: 58px;
}

.yas-list-item-actions {
  position: absolute;
  /* @todo revisit this because I don't like hardcoding this and we may be
   * able to do this with grid */
  top: 3px;
  right: 6px;
}

.yas-list-item-actions {
  font-size: 1rem
}


/* li-container/li-item
 *
 * list items will autoindent when nested
 * ------------------------------------------------------------------------- */

.yas-li-container {
  list-style: disc;
  list-style-position: inside;
}

.yas-li-container\:no-bullets {
  list-style: none;
}

.yas-li-container .yas-li-container,
.yas-li-container\:no-bullets .yas-li-container\:no-bullets {
  padding-left: 2rem;
}

/* checkbox
 * ------------------------------------------------------------------------- */

.yas-checkbox-group__checkboxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(1rem,1rem,1rem) 0;
}

.yas-checkbox-group__checkboxes .yas-checkbox:not(:last-child)  {
  margin-right: 1em;
}

.yas-checkbox {
  display: flex;
  align-items: center;
}

.yas-checkbox__input {
  position: absolute;

  /* @note visually hide the checkbox because we're drawing our own to control
   * styles */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.yas-checkbox__label {
  /* @note reset label styles set in other css */
  margin: 0;
  display: flex;
  position: relative;
  user-select: none;
  cursor: pointer;
}

/* @note this is the checkbox the user sees and interacts with */
.yas-checkbox__label:before {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--yas-white);
  border: 1px solid var(--yas-blue-80);
  border-radius: 2px;
  margin-right: .5rem;
  transition: border-color .3s;
}

.yas-checkbox__input:hover + .yas-checkbox__label:before {
  border-color: var(--yas-blue-23);
}

.yas-checkbox__input:checked + .yas-checkbox__label:before {
  background: var(--yas-blue-23);
}


/* @note this is the checkmark inside the checkbox */
.yas-checkbox__input:checked + .yas-checkbox__label:after {
  content: " ";
  position: absolute;
  display: table;
  border: 2px solid var(--yas-white);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%,-50%);
  opacity: 1;
  transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
  top: 7px;
  left: 4px;
  width: 5.71428571px;
  height: 9.14285714px;
}

.yas-checkbox__input:disabled + .yas-checkbox__label {
  cursor: not-allowed;
}

.yas-checkbox__input:disabled + .yas-checkbox__label:before {
  background-color: var(--yas-blue-89);
  border-color: var(--yas-blue-89);
}

.yas-checkbox__input:disabled + .yas-checkbox__label:after {
  border-color: var(--yas-blue-89);
}

/* ----------------------------------------------------------------------------
 * input
 *
 * .yas-input-el[data-input-variant="app"] {..} for customization
 * ------------------------------------------------------------------------- */

.yas-input-el {
  /* Configuration */
  --input-border-color:              var(--yas-blue-89);
  --input-border-color-hover:        var(--yas-blue-30);
  --input-border-color-placeholder:  var(--yas-blue-30);
  --input-border-color-user-invalid: var(--yas-red);
  --input-border-color-error:        var(--yas-red);
  --input-border-color-focus:        var(--yas-input-border-focus);
  --input-border-radius:             4px;
  --input-border-width:              2px;
  --input-background-color:          var(--yas-white);
  --input-background-color-disabled: var(--yas-blue-96);

  /* Layout*/
  display: block;
  height: initial;
  padding: 0.2rem 0.3rem;

  /* Typography */

  /* stroke and radius */
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background-color: var(--input-background-color);

  /* interactive
   * -----------------------------------------------------------------------*/
  cursor: pointer;
}

.yas-input-el:hover:enabled {
  border-color: var(--input-border-color-hover);
}

.yas-input-el:focus:enabled {
  outline: 2px solid var(--input-border-color-focus);
}

.yas-input-el:hover:enabled:focus {
  border-color: var(--input-border-color);
}

.yas-input-el:disabled {
  cursor: not-allowed;
  background-color: var(--input-background-color-disabled);
}

/* @note when building a multi-page app `user-invalid` is preferential to
 * `:invalid` because it only triggers the invalid state on submit. */
.yas-input-el:user-invalid,
.yas-input-el--user-invalid {
  outline: none;
  border-color: var(--input-border-color-user-invalid);
}

.yas-input-el::placeholder {
  color: var(--input-border-color-placeholder);
}

/* @note apply this to the input element itself.  Not a fan of this because we
 * should have a default "max-width" as a prop on the component and not as a
 * class.  The reason this is not a prop (yet!) is because we need to sync with
 * design for insight into a unified min-width ideal.  Until then, we can use
 * this class when we need to apply this. */
.yas-input-el--max-width {
  max-width: 30em;
}

.yas-help-text--invalid {
  color: var(--input-border-color-error);
}

/*
 * Autocomplete:
 * ------------------------------------------------------------------------- */

.yas-autocomplete-options {
  max-height: 12em;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.yas-autocomplete-option[aria-selected="true"] {
  background-color: #005EA5;
  border-color: #005EA5;
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
 * select
 *
 * .yas-select[data-input-variant="app"] {..} for customization
 * ------------------------------------------------------------------------- */

.yas-select {
   position: relative;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   /* @todo without this height is randomly added to our select components. This
    * happens because of Ant's proscriptive styles.  We can remove this when
    * we drop Ant. */
   line-height: normal;
}

.yas-input--content-width {
  /* @note nothing special in the calculation of this number. */
  width: clamp(20rem, 20rem, 20rem);
}

.yas-select--content-width,
.yas-number--content-width {
  width: fit-content;
  max-width: 20rem;
}

.yas-select--full-width,
.yas-input--full-width {
  width: 100%;
}

.yas-control-text--disabled {
  color: var(--yas-white);
}

.yas-select-el {
  /* configuration */

  --select-border-width:       2px;
  --select-border-radius:      4px;
  --select-background-color:   var(--yas-white);
  --select-border-color:       var(--yas-input-border);
  --select-border-color-hover: var(--yas-input-border-hover);
  --select-border-color-focus: var(--yas-input-border-hover);
  --select-color:              var(--yas-black);

  /* @todo reset styles...maybe util */
  appearance: none;
  cursor: pointer;

  /* custom styles
  *
  * @note more padding on right to make room for arrow.
  */
  padding: 0.45rem 0.3rem;
  border-radius: var(--select-border-radius);
  border: var(--select-border-width) solid var(--select-border-color);
  background-color: var(--select-background-color);
  color: var(--select-color);

  /* @todo separate font styles */
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

/* @note enabled is here for a native select elem and the the first one is
 * for a non-native-select which wants to use these styles. Think: div. */
.yas-select-el:hover,
.yas-select-el:hover:enabled {
  border-color: var(--select-border-color-hover);
}

.yas-select-el:focus {
  outline: 2px solid var(--select-border-color-focus);
  outline-offset: 0;
}

.yas-select-el:disabled {
  cursor: not-allowed;
  color: var(--yas-input-color-disabled);
  border-color: var(--yas-input-border-disabled);
  background-color: var(--yas-input-background-color-disabled);
}

.select__arrow,
.select__arrow\:no-label {
  position: absolute;
  top: 15px;
  right: 8px;
  color: var(--yas-input-color-disabled);
  /* @note without this, a direct click on SVG prevents select option menu opening */
  pointer-events: none;
}

.select__arrow\:no-label {
  top: -9px;
}

.select__arrow[disabled],
.select__arrow\:no-label[disabled] {
  color: var(--yas-blue-70);
}

.select__arrow svg,
.select__arrow\:no-label svg {
  width: 25px;
}

/* ----------------------------------------------------------------------------
 * select-with-filter
 *
 * This component is comprised of four separate components:
 *
 *   select
 *   input
 *   dropdown
 *   list items
 *
 * .yas-select-with-filter[data-input-variant="app"] {..} for customization
 *
 * But the input styles is controlled though the input customization styles
 * ------------------------------------------------------------------------- */

.yas-select-with-filter {
  --select-border-color: var(--yas-black);
  --select-border-width: 1px;
  --select-dropdown-border-color: var(--yas-black);
  --select-dropdown-border-width: 1px;
  --select-dropdown-background-color: var(--yas-white);
  --select-dropdown-background-color: var(--yas-white);
  --select-dropdown-option-background-color: var(--yas-white);
  --select-dropdown-option-background-color-hover: var(--yas-blue-96);
  --select-dropdown-option-background-color-selected: var(--yas-blue-96);

  position: relative;
}

.yas-select-with-filter-select {
  padding: 0.45rem 0.3rem;
  border: var(select-border-width) solid var(--select-border-color);
}

.yas-with-filter-dropdown {
  /* layout */
  position: absolute;
  width: 100%; /* @note position the dropdown under the input */
  top: 100%;
  margin: 0;   /* @note remove space above the dropdown when stack util css class applied */
  z-index: 1;  /* @note so it can overlay stuff after it */

  /* stroke and radius */
  border: var(--select-dropdown-border-width) solid var(--select-dropdown-border-color);
  background-color: var(--select-dropdown-background-color);
}

.yas-with-filter-option {
  cursor: pointer;
  background-color: var(--select-dropdown-option-background-color);
}

.yas-with-filter-option[aria-selected="true"] {
  background-color: var(--select-dropdown-option-background-color-selected);
}

.yas-with-filter-option:hover {
  background-color: var(--select-dropdown-option-background-color-hover);
}

/*
 * Table:
 *
 * Features
 *   - supports both horizontal and vertical scroll.  Making a table responsive
 *     is a frustrating experience.
 *   - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
 * ------------------------------------------------------------------------- */

/* @note the column CSS is set in the yas/table component in CLJS.  The reason
 * for this is because in many instances we won't know how many columns the
 * table will require. Having said this, we default to two columns to provide
 * an example, but also so that a table can "just work" in some scenarios. */
.yas-table {
  table-layout: fixed;
  border-collapse: collapse;

  /* @note responsive layout */
  width: auto;
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(150px, 1fr);

  /* @note scrollable - assumes that the table is inside another container
   * which determines its width. */
  min-width: 100%;
  overflow-x: auto;
  border-spacing: 0;
}

.yas-table__body,
.yas-table__head,
.yas-table__row {
  display: contents;
}

.yas-table__cell,
.yas-table__header {
  cursor: default;
  text-align: left;
  padding: .5rem .8rem;
  vertical-align: top;
  /* @note prevents single hyphenated/underscored words from wrapping */
  word-break: inherit;
}

.yas-table__header {
  position: sticky;
  top: 0;
  color: var(--yas-blue-40);
  text-transform: uppercase;
  border-bottom: 1px solid var(--yas-blue-70);
}

/* @note cells instead of table have border bottom because `display` set to
 * `contents` for `cell`, `head` and `row`*/
.yas-table__cell {
  border-bottom: 1px solid var(--yas-blue-70);
}

.yas-table__row {
  border-bottom: 1px solid var(--yas-blue-30);
}

.yas-table__row:last-child {
  border-bottom: 1px solid transparent;
}

.yas-table__row:hover {
  background-color: var(--yas-blue-89);
}

.yas-table__signpost {
  text-align: center;
}

/* ----------------------------------------------------------------------------
 * TextArea
 * --------------------------------------------------------------------------*/

.yas-textarea-el {
  border: 2px solid var(--yas-blue-89);
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  font-size: 14px;
  form-sizing: content;
}

/* @todo custom min height for the enrichment input field.  Trying to make
 * this generic, but not sure how to reason about this just yet. */
.yas-textarea-el\:height {
  min-height: 6lh;
  max-height: 6lh;
}

.yas-textarea-el:hover {
  border: 1px solid var(--yas-input-border-hover);
}

.yas-textarea-el:focus {
  outline: 2px solid var(--yas-blue-16);
  outline-offset: 3px;
}


/* alert
 * ------------------------------------------------------------------------- */

/* @note default to info */
.yas-alert {
  --background-color:  transparent;
  --border-color:  var(--yas-blue-23);
  color: var(--yas-black);
  padding: .5em 1em;
  border-radius: 4px;
  border: 1px solid var(--yas-input-border-color);
  background-color: var(--background-color);
}

/* @todo remove this overly specific selector when we fix our default CSS
 * styles */
.yas-alert p {
  margin: 0;
}

.yas-alert--success {
  --background-color:  transparent;
  --border-color:  var(--yas-green);
}

.yas-alert--warn {
  --background-color:  transparent;
  --border-color:  var(--yas-yellow);
}

.yas-alert--error {
  --background-color:  transparent;
  --border-color:  var(--yas-red);
}


/* swatch
 * ------------------------------------------------------------------------- */
.yas-swatch {
  height: 2em;
  width: 2em;
}


/*
 *  Typography
 * ------------------------------------------------------------------------- */

.yas-h1,
.yas-h2,
.yas-h3,
.yas-big-font,
.yas-markdown h1,
.yas-markdown h2,
.yas-markdown h3 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  margin: 0;

}

.yas-h1,
.yas-markdown h1 {
  font-size: clamp(2.5rem, calc(2.2rem + 1.5vw), 4rem)
}

.yas-h2,
.yas-markdown h2 {
  font-size: clamp(2rem, calc(1.7rem + 1.5vw), 3.5rem)
}

.yas-h3,
.yas-markdown h3 {
  font-size: clamp(2rem, calc(1.8rem + 1vw), 3rem)
}

.yas-big-font {
  font-size: 3rem;
}

.yas-label,
.yas-desc-label,
.yas-desc-value {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
}

.yas-desc-label,
.yas-desc-value {
  font-family: var(--font-family);
  color: var(--yas-blue-60);
  font-size: clamp(1rem, calc(0.8rem + 1vw), 2rem)
}

.yas-desc-value {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 1rem
}

.yas-body,
.yas-markdown p,
.yas-markdown li {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 1rem
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-red {
  color: var(--yas-red);
}

.font-green {
  color: var(--yas-green);
}

.yas-inline-code,
.yas-markdown code {
  background-color: var(--yas-white-96);
}

/*
 *  Bar Chart
 * ------------------------------------------------------------------------- */

/* @note 420 because the 20 gives space for labels and x axis */
.bar-chart-container {
  width: 420px;
  height: 420px;
}