@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--ascii {
    --f-icon: 'Material Icons';

    --c-black-rgb: 0, 0, 0;
    --c-white-rgb: 255, 255, 255;

    --c-dark-rgb: 30, 20, 40;
    --c-grey-rgb: 30, 20, 40;
    --c-light-rgb: 255, 255, 255;
    --c-shadow-rgb: 30, 20, 40;

    --c-accent-1: #232b29;
    --c-accent-2: #3d4d49;
    --c-accent-3: #3d5c55;
    --c-accent-4: #4f756d;
    --c-accent-5: #95b8af;
    --c-accent-6: #ccdbd7;

    --c-red-1: #9a391f; /* #B51700; */
    --c-red-2: #ec6142; /* #D49E94; */

    --c-green-1: #1d972c;
    --c-green-2: #90d499;

    --c-body-bg: #c8cdd4;

    .jui-theme__computed {
      --c-grey-1: #1e1428;
      --c-grey-2: #342b3d;
      --c-grey-3: #615b69;
      --c-grey-4: #8e8993;
      --c-grey-5: #bbb8be;
      --c-grey-6: #e9e8ea;

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

      --c-ctrl-primary-bg: var(--c-accent-6);
      --c-ctrl-primary-bg-active: var(--c-accent-5);
      --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-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);
      --c-popper-text-active: rgba(var(--c-black-rgb), 1);
      --c-popper-text-secondary: rgba(var(--c-white-rgb), 0.75);

      --c-error-bg: #feebe7;
      --c-error-text: #d13415;
      --c-error-text-active: #5c271f;
      --c-error-border: #ec8e7b;

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

      --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(--dark-1);
      --c-ctrl-bg-active: var(--c-dark-2);
      --c-ctrl-text: var(--c-grey-6);
      --c-ctrl-text-active: var(--c-white);
      --c-ctrl-text-secondary: var(--c-light-3);
      --c-ctrl-border: var(--c-light-3);
      --c-ctrl-border-active: rgba(255, 255, 255, 0.8);

      --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-error-bg: #4e1511;
      --c-error-text: #ff977d;
      --c-error-text-active: #fbd3cb;
      --c-error-border: #ec6142;
    }

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

@layer components {
  .jui-theme--ascii {
    /* -------BOX-------- */
    .jui-box {
      overscroll-behavior: none;
    }

    /* -------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;
    }
    .jui-input-text__symbol--active:hover {
      color: var(--c-ctrl-text);
    }

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

    /* -------CHECKBOX------- */
    .jui-checkbox__input {
      display: none;
    }

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

    .jui-checkbox__input:checked + .jui-checkbox__label {
      color: var(--c-ctrl-text-active);
      font-weight: 500;
    }

    .jui-checkbox__label:before {
      margin-right: 0.5em;
      font-family: 'IBM Plex Mono';
      content: '[\00a0]';
      color: var(--c-ctrl-text);
    }
    .jui-checkbox__input:checked + .jui-checkbox__label:before {
      content: '[\2713]';
      color: var(--c-ctrl-text-active);
    }

    /* -------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: flex;
      align-items: center;
      font-weight: normal;
      font-size: var(--fs-s);
      color: var(--c-ctrl-text);
    }
    .jui-label:after {
      content: ' ';
      flex: 1;
      height: 1px;
      margin-left: 1em;
      border-top: 1px dotted var(--c-ctrl-border);
    }
    .jui-field--has-errors > .jui-field__label:after {
      border-top-color: var(--c-error-border);
    }
    .jui-field--has-errors .jui-field__label {
      color: var(--c-error-text);
    }
    .jui-field--has-errors .jui-field__frame {
      border-bottom-color: var(--c-error-border);
    }
    .jui-field__frame {
      border-bottom: 2px solid var(--c-ctrl-border);
    }
    .jui-field__frame:focus-within {
      border-bottom-color: var(--c-ctrl-border-active);
    }
    .jui-field__errors {
      color: var(--c-error-text);
      font-size: var(--fs-s);
    }
    .jui-field__error {
      margin-block: var(--padding-s);
    }
    .jui-field__input {
      color: var(--c-ctrl-text);
      padding: var(--padding-xs);
      font-weight: 500;
    }
    .jui-field__symbol {
      font-weight: 500;
      color: var(--c-ctrl-text-secondary);
    }
    .jui-field__symbol--active {
      color: var(--c-ctrl-secondary);
    }

    /* -------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 {
    }
    .jui-select:focus-within {
    }

    .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 {
      display: block;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--c-ctrl-text);
      padding: 0;

      &:hover {
        color: var(--c-ctrl-text-active);
      }

      .jui-select__control {
        padding: 0 2em 0 1em;
      }
    }
    .jui-select--button:focus {
      color: var(--c-ctrl-text-active);
    }
    .jui-select--button:focus:after,
    .jui-select--button:focus:before {
      opacity: 0.95;
    }
    .jui-select--button:after,
    .jui-select--button:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      padding: 0 0.2em;
      border-width: 2px 0 2px 0;
      border-style: solid;
      border-color: var(--c-ctrl-border-active);
      opacity: 0.7;
    }
    .jui-select--button:before {
      left: 0;
      border-left-width: 2px;
    }
    .jui-select--button:after {
      right: 0;
      border-right-width: 2px;
    }

    .jui-select--button .jui-select__icon {
      position: absolute;
      top: 0;
      right: 0.5em;
    }

    /* -------BUTTON & SELECT BUTTON ------- */
    .jui-button {
      color: var(--c-ctrl-text);
      padding: 0 var(--padding-m);
      /*      font-size: var(--fs-s);*/
    }
    .jui-button:hover {
      color: var(--c-ctrl-text-active);
    }
    .jui-button__icon {
      color: inherit;
    }

    .jui-button:after,
    .jui-button:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      padding: 0 0.12em;
      border-width: 2px 0 2px 0;
      border-style: solid;
      border-color: var(--c-ctrl-border-active);
      opacity: 0.7;
    }
    .jui-button:before {
      left: 0;
      border-left-width: 2px;
    }
    .jui-button:after {
      right: 0;
      border-right-width: 2px;
    }

    .jui-button--variant-link {
    }
    .jui-button--variant-link:hover {
    }
    .jui-button--variant-danger {
      color: var(--c-error-text);
    }
    .jui-button--variant-danger:hover {
      color: var(--c-error-text-active);
    }
    .jui-button--variant-primary {
      font-weight: 600;
      color: var(--c-ctrl-primary-text);
    }
    .jui-button--variant-primary:hover {
      color: var(--c-ctrl-primary-text-active);
    }

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

    .jui-button--variant-primary:after,
    .jui-button--variant-primary:before {
      border-color: var(--c-ctrl-primary-border-active);
    }
    .jui-button--variant-danger:after,
    .jui-button--variant-danger:before {
      border-color: var(--c-error-border);
    }

    .jui-button:hover:after,
    .jui-button:hover:before,
    .jui-select--button:hover:after,
    .jui-select--button:hover:before {
      opacity: 0.95;
    }

    /* -------DATE PICKER------- */
    .jui-date-picker__popup {
      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-3xl);
      text-transform: uppercase;
    }
    .jui-text--header-h2 {
      font-weight: 500;
      font-size: var(--fs-xxl);
    }
    .jui-text--header-h3 {
      font-weight: normal;
      text-transform: uppercase;
      font-size: var(--fs-l);
    }
    .jui-text--header-h4 {
      font-weight: 600;
      font-size: var(--fs-l);
    }
    .jui-text--header-h5 {
      font-weight: 500;
      font-size: var(--fs-m);
    }
    .jui-text--line:after {
      content: ' ';
      flex: 1;
      height: 1px;
      margin-left: 1em;
      border-top: 1px dotted var(--c-ctrl-border);
    }
  }
}
