@import './reset.css' layer(base);
@import './fonts/IBMPlexSans.css' layer(base);
@import './fonts/IBMPlexMono.css' layer(base);
@import './fonts/MaterialIcons.css' layer(base);

@layer base {
  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.4rem;
    font-family: 'IBM Plex Sans', 'Segoe UI', 'Roboto', sans-serif;
  }

  /* -------COLORS------- */
  .jui-theme--rects {
    --f-icon: 'Material Icons';

    --c-black-rgb: 0, 0, 0;
    --c-white-rgb: 255, 255, 255;
    --c-light-rgb: 255, 255, 255;
    --c-shadow-rgb: 174, 175, 185;

    --c-red-1: #B51700;
    --c-red-2: #D49E94;

    --c-green-1: #1D972C;
    --c-green-2: #90D499;

   .jui-theme__computed {
      --c-body-bg: #FFFFFF;

      --c-accent-1: #3D2E22;
      --c-accent-2: #805A3D;
      --c-accent-3: #B88156;
      --c-accent-4: #D6A47C;
      --c-accent-5: #DCB799;
      --c-accent-6: #F2E0D0;

      --c-light-1: var(--c-white);
      --c-light-2: #F2F3F7;
      --c-light-3: #E1E1E5;
      --c-light-4: #CECED6;
      --c-light-5: rgba(var(--c-light-rgb), 0.5);
      --c-light-6: rgba(var(--c-light-rgb), 0.3);

      --c-grey-1: #24252E;
      --c-grey-2: #595961;
      --c-grey-3: #7E7F88;
      --c-grey-4: #9A9CAA;
      --c-grey-5: #AEAFB9;
      --c-grey-6: #CECED6;

      --c-dark-1: #393D61;
      --c-dark-2: #505383;
      --c-dark-3: #6767AA;
      --c-dark-4: #8788BC;
      --c-dark-5: #A9A9CC;
      --c-dark-6: #CACADC;

      --c-ctrl-bg: var(--c-accent-6);
      --c-ctrl-bg-active: var(--c-accent-5);
      --c-ctrl-text: var(--c-grey-2);
      --c-ctrl-text-active: var(--c-grey-1);
      --c-ctrl-text-secondary: var(--c-accent-3);
      --c-ctrl-border: var(--c-dark-5);
      --c-ctrl-border-active: var(--c-dark-3);

      --c-ctrl-primary-bg: var(--c-accent-5);
      --c-ctrl-primary-bg-active: var(--c-accent-4);
      --c-ctrl-primary-text: var(--c-accent-2);
      --c-ctrl-primary-text-active: var(--c-accent-1);
      --c-ctrl-primary-border: var(--c-accent-3);
      --c-ctrl-primary-border-active: var(--c-accent-4);

      --c-clickable: var(--c-accent-3);
      --c-clickable-active: var(--c-accent-1);
      --c-clickable-primary: var(--c-accent-2);
      --c-clickable-secondary: var(--c-accent-3);

      --c-popper-bg: rgba(85, 75, 87, 0.98);
      --c-popper-bg-active: var(--c-grey-6);
      --c-popper-text: rgba(var(--c-white-rgb), 1.0);
      --c-popper-text-active: rgba(var(--c-black-rgb), 1.0);
      --c-popper-text-secondary: rgba(var(--c-white-rgb), 0.75);

      --c-error-bg: var(--c-red-2);
      --c-error-text: var(--c-red-1);
      --c-error-border: var(--c-red-1);

      --shadow-1: 2px 2px 2px 0 rgba(var(--c-shadow-rgb), 0.80);
      --shadow-2: 3px 3px 0 0 rgba(var(--c-shadow-rgb), 0.80);
      --shadow-3: 5px 5px 0 0 rgba(var(--c-shadow-rgb), 0.80);

      --border-radius-1: 3px;
      --border-radius-2: 5px;
      --border-radius-3: 7px;
      --border-radius: 0;
    }

    /* ------- INVERSE COLORS ------- */
    .jui-box__item--bg-accent-1,
    .jui-box__item--bg-accent-2,
    .jui-box__item--bg-accent-3,
    .jui-box__item--bg-dark-1,
    .jui-box__item--bg-dark-2,
    .jui-box__item--bg-dark-3,
    .jui-box__item--bg-grey-1,
    .jui-box__item--bg-grey-2,
    .jui-box__item--bg-grey-3 {
      --c-ctrl-bg: var(--c-accent-6);
      --c-ctrl-bg-active: var(--c-accent-5);
      --c-ctrl-text: var(--c-grey-6);
      --c-ctrl-text-active: var(--c-grey-1);
      --c-ctrl-text-secondary: var(--c-accent-3);
      --c-ctrl-border: var(--c-grey-2);
      --c-ctrl-border-active: rgba(255, 255, 255, 0.5);

      --c-ctrl-primary-bg: var(--c-accent-1);
      --c-ctrl-primary-bg-active: var(--c-accent-2);
      --c-ctrl-primary-text: var(--c-white);
      --c-ctrl-primary-text-active: var(--c-white);
      --c-ctrl-primary-border: var(--c-accent-2);
      --c-ctrl-primary-border-active: var(--c-accent-5);

      --c-clickable: rgba(var(--c-white-rgb), 0.75);
      --c-clickable-active: rgba(var(--c-white-rgb), 1);
      --c-clickable-primary: rgba(var(--c-white-rgb), 0.9);
      --c-clickable-secondary: var(--c-accent-4);
    }

    /* -------BODY------- */
    .jui-theme__computed {
      background: var(--c-body-bg);
    }
  }
}

@layer components {
  .jui-theme--rects {
    /* -------TEXT INPUT------- */
    .jui-input-text {  }
    .jui-input-text__frame {  }
    .jui-input-text__input {  }
    .jui-input-text__input:focus {
      color: var(--c-ctrl-text-active);
    }

    ::placeholder {
      color: var(--c-ctrl-text-secondary);
      font-weight: normal
    }

    .jui-input-text__symbol {
      color: var(--c-ctrl-text-secondary);
      font-weight: 500;
    }

    .jui-input-text__symbol--active {
      cursor: pointer;
      opacity: 0.85;
    }
    .jui-input-text__symbol--active:hover {
      color: var(--c-ctrl-text-secondary);
      opacity: 1;
    }

    .jui-input-text__symbol--prefix {  }
    .jui-input-text__symbol--suffix {  }

    /* -------CHECKBOX------- */
    .jui-checkbox__input {  }

    .jui-checkbox__label {
      color: var(--c-ctrl-text);
    }

    .jui-checkbox__input:checked + .jui-checkbox__label {
      color: var(--c-ctrl-text-active);
      font-weight: 500;
    }
    /* -------RADIO------- */
    .jui-choice__input {
      display: none;
    }
    .jui-choice__label:before {
      font-weight: 500;
      color: var(--c-ctrl-text);
      margin-right: 0.5em;
      font-family: 'IBM Plex Mono';
      content: '(\00a0)';
    }
    .jui-choice__input:checked + .jui-choice__label:before {
      content: '(\2022)';
      color: var(--c-ctrl-text-active);
    }
    .jui-choice__input:checked + .jui-choice__label {
      color: var(--c-ctrl-text-active);
      font-weight: 500;
    }

    /* -------FIELD------- */
    .jui-label {
      display: block;
      font-weight: 500;
      color: var(--c-ctrl-text);
      margin-bottom: var(--padding-xs);
    }
    .jui-field--has-errors .jui-field__label {
      color: var(--c-error-text);
    }
    .jui-field__frame {
      background: var(--c-ctrl-bg);
    }
    .jui-field__frame:focus-within {
      background: var(--c-ctrl-bg-active);
    }
    .jui-field__errors {
      color: var(--c-error-text);
      font-size: var(--fs-s);
    }
    .jui-field__error {
      font-weight: 500;
      margin-block: var(--padding-s);
    }
    .jui-field__input {
      color: var(--c-ctrl-text-active);
      padding: var(--padding-s);
      font-weight: 500;
    }
    .jui-field__symbol {
      font-weight: 500;
      color: var(--c-ctrl-text-secondary);
      opacity: 0.85;
    }
    .jui-field__symbol--active {
      color: var(--c-ctrl-text-secondary);
      opacity: 1;
    }

    /* -------SELECT LIST------- */
    .jui-select-list {
      .jui-select-list__item {}
      .jui-select-list__item--active {  color: var(--c-ctrl-primary-text);  }
      .jui-select-list__item--selected {}
    }

    /* -------DROPDOWN LIST------- */
    .jui-select-list--dropdown {
      color: var(--c-popper-text);
      background: var(--c-popper-bg);
      backdrop-filter: blur(3px);
      box-shadow: var(--shadow-3);

      .jui-select-list__item { padding-right: var(--padding-l);  }
      .jui-select-list__item--active {
        color: var(--c-popper-text-active);
        background: var(--c-popper-bg-active);
      }
      .jui-select-list__item--selected:after {
        position: absolute;
        width: var(--padding-xl);
        text-align: center;
        font-family: 'IBM Plex Mono';
        content: '\2713';
        right: 0;
      }
    }

    /* -------TEXT------- */
    .jui-text--link {
      color: var(--c-ctrl-primary-text);
      text-decoration: underline;
    }
    .jui-text--link:hover {
      color: var(--c-ctrl-primary-text-active);
    }

    /* -------SELECT------- */
    .jui-select { color: inherit; }
    .jui-select:focus-within { color: var(--c-ctrl-text-active); }

    .jui-select--button {
      color: var(--c-ctrl-text);
    }
    .jui-select--button:hover {
      color: var(--c-clickable-active);
    }
     .jui-select__control:focus {
      color: var(--c-ctrl-text-active);
    }

    .jui-select__control:has(option[value=""]:checked) {
      font-weight: normal;
      color: var(--c-ctrl-text-secondary);
    }

    .jui-select__control {
      font-weight: 500;
    }

     .jui-select__icon {
      color: var(--c-ctrl-text-secondary, inherit);
    }

    .jui-select--button {
      text-transform: uppercase;
      font-weight: 500;
      color: var(--c-clickable);
      padding: 0 var(--padding-m);
    }
    .jui-select--button:focus {
      color: var(--c-clickable-active);
    }
    .jui-select--button:focus:after,
    .jui-select--button:focus:before {
      opacity: 0.95;
    }

    .jui-select--button .jui-select__icon {
      right: 0.5em;
      color: var(--c-clickable-secondary);
    }

    /* -------BUTTON & SELECT BUTTON ------- */
    .jui-button {
      color: var(--c-clickable);
      padding: 0 var(--padding-m);
      font-weight: 500;
    }
    .jui-button:hover {
      color: var(--c-clickable-active);
    }
    .jui-button--link {  }
    .jui-button--link:hover {  }
    .jui-button--link .jui-button__label {  }

    .jui-button--disabled {
      pointer-events: none;
      color: var(--c-ctrl-text-secondary);
    }
    .jui-button--disabled:hover {
      color: var(--c-ctrl-text-secondary);
    }

    .jui-button--primary {
      font-weight: 600;
      color: var(--c-clickable-primary);
    }
    .jui-button--primary:hover {
      color: var(--c-clickable-active);
    }

    .jui-button__icon {
      color: var(--c-clickable-secondary);
    }
    .jui-button:hover .jui-button__icon {
      color: var(--c-clickable-active);
    }
    /* -------DATE PICKER------- */
    .jui-date-picker__popup {
      top: 110%;
      color: var(--c-popper-text-secondary);
      background: var(--c-popper-bg);
    }

    .jui-date-picker__calendar {
      border-radius: var(--border-radius);
    }

    .rdp {
      --rdp-cell-size: 30px;
      --rdp-caption-font-size: var(--fs-l);
      --rdp-accent-color: var(--c-popper-text);
      --rdp-background-color: transparent;
    }

    .rdp-caption_label {
      text-transform: uppercase;
    }

    .rdp-day.rdp-button:hover {
      color: var(--c-popper-text);
    }

    .rdp-day_selected,
    .rdp-day_selected.rdp-button:hover {
      color: var(--c-popper-text-active);
      background: var(--c-popper-bg-active);
    }

    /* ----------TEXT------------ */
    .jui-text--header-h1 {
      font-weight: normal;
      font-size: var(--fs-xxl);
    }
    .jui-text--header-h2 {
      font-weight: 500;
      font-size: var(--fs-xl);
    }
    .jui-text--header-h3 {
      font-weight: normal;
      font-size: var(--fs-l);
    }
    .jui-text--header-h4 {
      font-weight: 600;
      font-size: var(--fs-m);
    }
    .jui-text--header-h5 {
      font-weight: 500;
      font-size: var(--fs-m);
    }
    .jui-text--line:after {
      border-top: 1px dotted var(--c-ctrl-border-active);
    }
  }
}


