/* Cosmatae Studio theme for the real Penpot workspace. */
body:has(.main_ui_workspace__workspace) {
  --color-background-primary: #080d1f;
  --color-background-secondary: #0d1430;
  --color-background-tertiary: #111936;
  --color-background-quaternary: #1b2450;
  --color-canvas: #f4f7ff;
  --color-foreground-primary: #f7f8ff;
  --color-foreground-secondary: #aab4d2;
  --color-foreground-tertiary: #7783a8;
  --color-accent-primary: #9a7cff;
  --color-accent-primary-hover: #b29cff;
  --color-accent-primary-active: #795ae9;
  --input-background-color: rgba(255,255,255,.055);
  --input-border-color: rgba(255,255,255,.12);
  --input-foreground-color: #f7f8ff;
  --input-placeholder-color: #7783a8;
  --button-radio-background-color-rest: rgba(255,255,255,.045);
  --button-radio-background-color-hover: rgba(154,124,255,.18);
  --button-radio-background-color-active: #7256df;
  --button-radio-foreground-color-rest: #aab4d2;
  --button-radio-foreground-color-hover: #ffffff;
  --button-radio-foreground-color-active: #ffffff;
  --text-editor-selection-background-color: rgba(120,91,231,.35);
  color: var(--color-foreground-primary);
  background: #080d1f;
  font-family: "worksans", "Inter", sans-serif;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace {
  background: radial-gradient(circle at 50% -20%, rgba(112,82,236,.2), transparent 38%), #080d1f !important;
  color: var(--color-foreground-primary) !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-content,
body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-viewport {
  background: #f4f7ff !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-header,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__settings-bar-content,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_tokens_sidebar__sidebar-wrapper {
  background: rgba(11,16,39,.94) !important;
  color: #f7f8ff !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.035);
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar {
  backdrop-filter: blur(22px);
  transition: box-shadow .16s ease;
}

body.cosmatae-is-resizing,
body.cosmatae-is-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}

body.cosmatae-is-resizing .main_ui_workspace_sidebar__right-settings-bar {
  transition: none !important;
}

body.cosmatae-right-collapsed .main_ui_workspace_sidebar__right-settings-bar {
  display: none !important;
  min-width: 0 !important;
  width: 0 !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar .main_ui_workspace_sidebar__resize-area {
  right: -4px !important;
  width: 8px !important;
  background: transparent !important;
  outline: none;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar .main_ui_workspace_sidebar__resize-area::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 3px;
  width: 1px;
  background: rgba(154,124,255,.16);
  transition: background .16s ease, box-shadow .16s ease;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar .main_ui_workspace_sidebar__resize-area:hover::after,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar .main_ui_workspace_sidebar__resize-area:focus-visible::after {
  background: rgba(154,124,255,.8);
  box-shadow: 0 0 12px rgba(126,91,244,.8);
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__collapse-sidebar-button,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__collapsed-sidebar {
  visibility: hidden !important;
  pointer-events: none !important;
}

.cosmatae-panel-resizer {
  position: fixed;
  top: 0;
  z-index: 1200;
  width: 12px;
  height: 100vh;
  cursor: ew-resize;
  outline: none;
  pointer-events: auto;
}

.cosmatae-panel-resizer::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 5px;
  width: 1px;
  background: transparent;
  transition: background .16s ease, box-shadow .16s ease;
}

.cosmatae-panel-resizer:hover::after,
.cosmatae-panel-resizer:focus-visible::after {
  background: rgba(154,124,255,.8);
  box-shadow: 0 0 12px rgba(126,91,244,.8);
}

body.cosmatae-right-collapsed .cosmatae-panel-resizer--right {
  display: none;
}

.cosmatae-panel-toggle {
  position: fixed;
  top: 50%;
  z-index: 1201;
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(178,156,255,.28);
  border-radius: 10px;
  background: rgba(13,20,48,.92);
  color: #c8baff;
  font: 600 20px/1 "Inter", sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 18px rgba(126,91,244,.12);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.cosmatae-panel-toggle:hover,
.cosmatae-panel-toggle:focus-visible {
  border-color: rgba(178,156,255,.68);
  background: rgba(92,64,201,.94);
  color: #fff;
  outline: none;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-header,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_tokens_sidebar__sidebar-header {
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  background: linear-gradient(180deg, rgba(30,38,82,.72), rgba(11,16,39,.2)) !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-header {
  padding-inline: .75rem !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar [class*="layer-row"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar [class*="element-list-body"] > * {
  min-height: 30px;
  border-radius: 7px;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar [class*="layer-row"]:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar [class*="element-list-body"] > *:hover {
  background: rgba(154,124,255,.09) !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs button,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs [role="tab"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar_assets__section-button,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__button-radio,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_tokens_sidebar__import-export-button {
  border-radius: 9px !important;
  color: #aab4d2 !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs button:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs [role="tab"]:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar_assets__section-button:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__button-radio:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_tokens_sidebar__import-export-button:hover,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs [aria-selected="true"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-sidebar-tabs .selected,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar_assets__section-button.main_ui_workspace_sidebar_assets__opened {
  background: linear-gradient(135deg, rgba(126,91,244,.78), rgba(92,64,201,.75)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(103,75,225,.28), inset 0 1px rgba(255,255,255,.2);
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__layers-tab,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__versions-tab,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__history-tab {
  color: #aab4d2 !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__layers-tab [aria-selected="true"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__versions-tab [aria-selected="true"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__history-tab [aria-selected="true"] {
  color: #ffffff !important;
  border-bottom-color: #9a7cff !important;
}

body:has(.main_ui_workspace__workspace) input,
body:has(.main_ui_workspace__workspace) select,
body:has(.main_ui_workspace__workspace) textarea,
body:has(.main_ui_workspace__workspace) [role="textbox"] {
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.055) !important;
  color: #f7f8ff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar [class*="options__menu-section"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar [class*="options__section"] {
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  padding-block: .5rem !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar [class*="title"] {
  letter-spacing: .015em;
}

body:has(.main_ui_workspace__workspace) input:focus,
body:has(.main_ui_workspace__workspace) select:focus,
body:has(.main_ui_workspace__workspace) textarea:focus,
body:has(.main_ui_workspace__workspace) [role="textbox"]:focus {
  border-color: rgba(154,124,255,.85) !important;
  box-shadow: 0 0 0 3px rgba(126,91,244,.18) !important;
  outline: none !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-viewport > *,
body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-content > * {
  border-color: rgba(255,255,255,.1) !important;
}

body:has(.main_ui_workspace__workspace) button {
  font-family: inherit;
}

body:has(.main_ui_workspace__workspace) button:hover {
  color: #ffffff;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar button[aria-selected="true"],
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar [role="tab"][aria-selected="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(126,91,244,.82), rgba(92,64,201,.78)) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 20px rgba(103,75,225,.25);
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__right-settings-bar hr,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_sidebar__left-settings-bar hr,
body:has(.main_ui_workspace__workspace) .main_ui_workspace_tokens_sidebar__sidebar-wrapper hr {
  border-color: rgba(255,255,255,.09) !important;
}

body:has(.main_ui_workspace__workspace) ::-webkit-scrollbar-thumb {
  background: rgba(154,124,255,.35) !important;
  border-color: transparent !important;
}

body:has(.main_ui_workspace__workspace) ::-webkit-scrollbar-thumb:hover {
  background: rgba(178,156,255,.65) !important;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-content canvas,
body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-content svg {
  filter: none;
}

body:has(.main_ui_workspace__workspace) .main_ui_workspace__workspace-content {
  box-shadow: inset 0 0 0 1px rgba(20,28,62,.16), inset 0 18px 45px rgba(27,36,80,.035) !important;
}

body:has(.main_ui_workspace__workspace) [class*="workspace_toolbar__toolbar"],
body:has(.main_ui_workspace__workspace) [class*="workspace_toolbar__tools"] {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 13px !important;
  background: rgba(11,16,39,.92) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05) !important;
  backdrop-filter: blur(20px);
}

body:has(.main_ui_workspace__workspace) [class*="workspace_toolbar__toolbar"] button,
body:has(.main_ui_workspace__workspace) [class*="workspace_toolbar__tools"] button {
  border-radius: 9px !important;
}

@media (max-width: 1100px) {
  body:has(.main_ui_workspace__workspace) {
    --left-sidebar-width-max: 22rem;
    --right-sidebar-width-max: 22rem;
  }

  .cosmatae-panel-toggle {
    height: 38px;
  }
}