@use 'collapse-button.scss';
@use 'context-menu.scss';
@use 'diagram-buttons.scss';
@use 'diagram.scss';
@use 'errors.scss';
@use 'palette.scss';
@use 'property-editor.scss';

:root {
  --daga-font-color: #233154;
  --daga-font-color-disabled: #808080;
  --daga-panel-background-color: #ffffff;
  --daga-panel-secondary-color: #f7f8fc;
  --daga-panel-border-color: #e6e6e6;
  --daga-property-background-color: #f5f8fa;
  --daga-property-border-color: #e1e4ff;
  --daga-property-selected-color: #ffffff;
  --daga-property-selected-background-color: #0095f9;
  --daga-property-disabled-color: var(--daga-property-background-color);
  --daga-property-border-radius: 0.25rem;
  --daga-property-input-padding: 0.2rem 0.5rem;
  --daga-error-color: #ff6363;

  --daga-primary-font-family: 'WonderUnitSans', sans-serif;
  --daga-monospace-font-family: 'DMMono', monospace;
}

@font-face {
  font-display: block;
  font-family: 'WonderUnitSans';
  font-style: normal;
  font-weight: normal;
  src:
    url('../fonts/WonderUnitSans-Medium.woff2') format('woff2'),
    url('../fonts/WonderUnitSans-Medium.woff') format('woff'),
    url('../fonts/WonderUnitSans-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-display: block;
  font-family: 'DMMono';
  font-style: normal;
  font-weight: normal;
  src:
    url('../fonts/DMMono-Medium.woff2') format('woff2'),
    url('../fonts/DMMono-Medium.woff') format('woff'),
    url('../fonts/DMMono-Medium.ttf') format('truetype');
  font-display: swap;
}

daga-diagram {
  div,
  p,
  li,
  button,
  input,
  option {
    font-family: var(--daga-primary-font-family);
  }
  code {
    font-family: var(--daga-monospace-font-family);
  }

  .prevent-user-select {
    user-select: none;
  }

  .daga-top-left {
    position: absolute;
    left: 0;
    top: 0;
  }
  .daga-top-right {
    position: absolute;
    right: 0;
    top: 0;
  }
  .daga-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .daga-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .daga-panel {
    background-color: var(--daga-panel-secondary-color);
    border: 1px solid var(--daga-panel-border-color);
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin: 1rem;
    max-height: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    .daga-collapse-button.daga-bottom {
      border-radius: 0.75rem 0.75rem 0 0;
    }
    .daga-collapse-button.daga-top {
      border-radius: 0 0 0.75rem 0.75rem;
    }
    .daga-collapse-button.daga-right {
      border-radius: 0.75rem 0 0 0.75rem;
    }
    .daga-collapse-button.daga-left {
      border-radius: 0 0.75rem 0.75rem 0;
    }
    .daga-panel-content {
      background-color: var(--daga-panel-background-color);
      border: 0;
      border-radius: 1rem;
      flex: 1 1 auto;
      overflow: auto;
    }
    .daga-panel-tabs {
      background-color: var(--daga-panel-secondary-color);
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      padding-top: 0.5rem;
      .daga-panel-tab {
        flex-grow: 1;
        flex-shrink: 0;
        padding: 0.5rem;
        text-align: center;
        user-select: none;
      }
      .daga-panel-tab.current-tab {
        background-color: var(--daga-panel-background-color);
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
      }
    }
  }
  .daga-panel.daga-bottom {
    flex-direction: column;
  }
  .daga-panel.daga-top {
    flex-direction: column-reverse;
  }
  .daga-panel.daga-right {
    flex-direction: row;
  }
  .daga-panel.daga-left {
    flex-direction: row-reverse;
  }
}