@import './theme.scss';

.excalidraw-cn-app {
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  --font-text-size: 16px;
  --line-height-normal: 1.5;
  --line-height-tight: 1.3;
  --input-height: 30px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --input-height: 30px;
  --input-radius: 5px;
  --input-font-weight: var(--font-normal);
  --input-border-width: 1px;

  .button-wrapper button {
    z-index: 1;
    height: 40px;
    max-width: 200px;
    margin: 10px;
    padding: 5px;
  }

  .excalidraw .App-menu_top .buttonList {
    display: flex;
  }

  :root[dir="ltr"] .excalidraw .layer-ui__wrapper .zen-mode-transition.App-menu_bottom--transition-left {
    transform: none;
  }

  .excalidraw .panelColumn {
    text-align: left;
  }

  .export-wrapper {
    display: flex;
    flex-direction: column;
    margin: 50px;

    &__checkbox {
      display: flex;
    }
  }

  .excalidraw {
    --default-button-size: 2rem !important;
    --default-icon-size: 1rem !important;
    --lg-button-size: 1.8rem !important;
    --lg-icon-size: 1rem !important;

    a {
      font-weight: 400;
    }

    button {
      box-shadow: none;
    }

    .dropdown-menu-item {
      justify-content: left;
    }

	.dropdown-menu .dropdown-menu-item-base{
		color: var(--text-normal);
	}

    .switch-theme {
      cursor: pointer;
      width: 100%;
      text-align: left;
      padding: 6px;
      border-radius: 5px;
      color: var(--text-normal);
      background-color: var(--background);
      font-size: 0.875rem;
      border: transparent;

      &:hover {
        background-color: var(--color-base-20);
      }
    }

    select,
    .dropdown {
      -webkit-app-region: no-drag;
      height: var(--input-height);
      font-size: var(--font-ui-small);
      font-family: inherit;
      font-weight: var(--input-font-weight);
      color: var(--text-normal);
      line-height: var(--line-height-tight);
      padding: 0 1.9em 0 0.8em;
      max-width: 100%;
      /* useful when width is set to anything other than 100% */
      box-sizing: border-box;
      margin: 0;
      border: 0;
      box-shadow: var(--input-shadow);
      border-radius: var(--input-radius);
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--interactive-normal);
      background-repeat: no-repeat, repeat;
      /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
      background-position: right 0.7em top 50%, 0 0;
      /* icon size, then gradient */
      background-size: 0.65em auto, 100%;
    }

    .language-select {
      width: 100%;
    }

    button.custom-element {
      width: 2rem;
      height: 2rem;
      margin: 0 8px;
    }

    .custom-footer,
    .custom-element {
      padding: 0.1rem;
    }

    button.help-icon {
      padding: 0.25rem;
    }

    button.dropdown-menu-button {
      padding: 0.5rem;

      &.App-toolbar__extra-tools-trigger {
        padding: 0.4rem;
      }
    }

    .App-menu_top{
      .ToolIcon__icon {
        justify-content: space-between;
  
        svg {
          fill: transparent;
        }
      }
    }

    .welcome-screen-menu-item {
      height: 2.6rem;
    }

    [data-radix-popper-content-wrapper] {
      // 修复浮层定位问题
      position: absolute !important;
    }

    .dropdown-menu-item-custom {
      text-align: left;
	  color: var(--text-normal);

      button {
        justify-content: start;
      }
    }

    .color-picker__button {
      margin: 0 2px;
    }

    .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon,
    .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon {
      background-color: #e3e2fe;
    }

    .App-toolbar .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon,
    .App-toolbar .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon {
      --keybinding-color: #b8b8b8;
    }

    .buttonList.buttonListIcon label svg {
      padding: 0;
    }

  }
}

.excalidraw-modal-container {
  button {
    box-shadow: none;
  }
}