@import "./dark.css";
@import "./light.css";

.vertical {
  display: flex;
  flex-direction: column;
}

.horizontal {
  display: flex;
  flex-direction: row;
}

.row {
  display: flex;
  flex-direction: row;
}

.left {
  flex-grow: 1;
}

.right {
  flex-grow: 0;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(./icons.woff) format('woff');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

:root {
  font-family: 'Roboto', sans-serif;
  --md-ref-typeface-brand: 'sans-serif';
  --md-ref-typeface-plain: 'sans-serif';
  --md-icon-font: 'Material Symbols Outlined';
}

body {
  margin: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--md-sys-color-surface-container-high);
}

#tools_panel {
  flex-basis: 350px;
  flex-grow: 0;
  flex-shrink: 0;
  background-color: var(--md-sys-color-surface);
  padding: 10px;
  height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
  z-index: 10;
  --pills-width: 260px;
}

.tools {
  background-color: var(--md-sys-color-secondary-container);
  border-radius: 22px;
  display: inline-block;
  overflow: hidden;
  font-size: 0;
}

/* .tools md-filled-tonal-icon-button { */
/*   --md-filled-tonal-icon-button-container-shape: 0px; */
/* } */

@media only screen and (max-width: 600px) {
  body {
    flex-direction: column;
  }

  #tools_panel {
    flex-basis: 100pt;
  }
}

#screen_panel {
  flex-grow: 1;
  flex-shrink: 1;
  height: 100vh;
  position: relative;
  /* align-items: center; */
  /* justify-content: center; */
  overflow: hidden;
  touch-action: none;
}

#screen_panel canvas {
  image-rendering: pixelated;
  position: absolute;
  left: calc(50% - var(--prop) * var(--pos-x));
  top: calc(50% - var(--prop) * var(--pos-y));
  width: calc(var(--prop) * var(--base-width));
}

.floating_bl {
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin: 10px;
}

.floating_br {
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin: 10px;
}

.floating_c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#scrim {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(1, 1, 1, 0.32);
}

#spinner {
  background-color: var(--md-sys-color-surface);
  border-radius: 12px;
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom_controls {
  padding: 3px;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  /* opacity: 0.5; */
  /* transition-duration: 250ms; */
  /* transition-timing-function: ease-in-out; */
}

/* .zoom_controls:hover { */
/*   opacity: 1; */
/* } */

#infos {
  visibility: hidden;
  height: 20px;
  padding: 8px 12px;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: 23px;
  position: relative;
}

.selected-tool {
  --md-filled-tonal-icon-button-container-color: var(--md-sys-color-primary);
}

.selected-tool md-icon {
  color: var(--md-sys-color-on-primary)
}

.color-picker {
  margin-top: 10px;
}

.color-picker .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

table.colors {
  border: none;
  border-collapse: collapse;
  border-radius: calc(var(--pills-width) * 0.3 / 8);
  overflow: hidden;
  width: var(--pills-width);
}

table.colors td {
  padding: 0px;
}

table.colors md-filled-icon-button {
  --md-filled-icon-button-container-shape: 0px;
  --md-filled-icon-button-container-width: calc(var(--pills-width) / 8);
  --md-filled-icon-button-container-height: calc(var(--pills-width) / 8);
  --md-filled-icon-button-icon-size: calc(var(--pills-width) / 12);
}

.chars {
  position: relative;
  margin-top: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: row;
  width: calc(100% - 12px);
  height: calc(100% - 230px);
  background-color: var(--md-sys-color-surface-container-lowest);
  flex-wrap: wrap;
  border-radius: 16px;
  overflow: hidden;
  padding: 6px;
}

.chars #chars {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  z-index: 11;
}

img.char {
  width: 18px;
  height: 27px;
  image-rendering: pixelated;
}

.sizes-chooser {
  display: flex;
  flex-direction: column;
}

.size {
  display: flex;
  align-items: center;
}

.size-settings {
  display: flex;
  flex-direction: column;
}

.font_preview_area {
  position: relative;
}

.font_buttons {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 12px;
  display: flex;
  flex-direction: row;
}


#font_preview {
  width: 100%;
  background-color: #000;
  border-radius: 24px;
  image-rendering: pixelated;
}

md-filled-text-field.small {
  --md-filled-text-field-input-text-size: 0.75rem;
  --md-filled-text-field-input-label-text-size: 0.75rem;
  --md-filled-text-field-top-space: 4px;
  --md-filled-text-field-bottom-space: 4px;
  --md-filled-text-field-trailing-space: 4px;
  --md-filled-text-field-leading-space: 6px;
  width: 60px;
}

md-filled-select.small {
  --md-filled-select-text-field-input-text-size: 0.75rem;
  --md-filled-select-text-field-supporting-text-size: 0.75rem;
  --md-filled-select-text-field-label-text-size: 0.75rem;
  --md-filled-field-input-label-text-size: 0.75rem;
  --md-filled-field-top-space: 4px;
  --md-filled-field-bottom-space: 4px;
  --md-filled-field-trailing-space: 4px;
  --md-filled-field-leading-space: 6px;
  width: 120px;
  /* height: 32px; */
}

md-filled-select.small::part(menu) {
  --md-menu-item-label-text-size: 0.75rem;
  --md-menu-item-top-space: 4px;
  --md-menu-item-bottom-space: 4px;
  /* --md-menu-item-trailing-space: 4px; */
  /* --md-menu-item-leading-space: 6px; */
}

.action_label {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

md-dialog {
  z-index: 99;
}

.project_cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* gap: 12px; */
}

.new_project {
  background-color: var(--md-sys-color-secondary-container);
  width: 244px;
  height: 180px;
  margin: 6px;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  --md-icon-size: 32px;
  color: var(--md-sys-color-on-secondary-container);
}

project-card {
  position: relative;
  padding: 6px;

  &.hoverleft::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -2px;
    width: 4px;
    height: 100%;
    background-color: var(--md-sys-color-secondary);
    border-radius: 2px;
  }

  &.hoverright::after {
    content: "";
    position: absolute;
    top: 0px;
    right: -2px;
    width: 4px;
    height: 100%;
    background-color: var(--md-sys-color-secondary);
    border-radius: 2px;
  }

  &.hoverfolder>div::before {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    border-radius: inherit;
    border: 4px solid var(--md-sys-color-secondary);
    box-sizing: border-box;
  }

  &.selected>div {
    background-color: var(--md-sys-color-secondary);

    & .headline label {
      color: var(--md-sys-color-on-secondary);
    }
  }

  &>div {
    background-color: var(--md-sys-color-secondary-container);
    width: 244px;
    height: 180px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    cursor: pointer;

    &>md-ripple {
      border-radius: inherit;
      /* inset: unset; */
      width: 244px;
      height: 180px;
    }

    & .preview {
      flex-grow: 1;
      margin: 5px;
      margin-top: 0px;
      /* background-color: var(--md-sys-color-surface-container); */
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      align-items: center;
      align-content: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;
    }

    & .headline {
      height: 28px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 4px;

      & label {
        /* color: var(--md-sys-color-on-secondary-container); */
        /* font-size: 16px; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
  }
}

.hint {
  display: flex;
  flex-direction: horizontal;
  align-items: center;
  background-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
  border-radius: 16px;
  padding: 8px;
}