@import 'utils';

html {
  // Styles from Microsoft FluentUI (https://react.fluentui.dev/?path=/docs)
  --font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;

  // Absolute values
  --content-max-width: 80rem;
  --conversation-padding-v: var(--titlebar--height);
  --conversations-padding: 0.25rem;
  --header-padding-v: var(--titlebar--height);
  --header-width: min(26rem, 38vw);
  --message-padding-v: 0.75rem;
  --radius: 1.5rem;
  --search-padding-v: var(--titlebar--height);
  --titlebar--height: 2rem;

  // Relative values
  --font-size-small: 0.75em;
  --font-size: 0.875em;
  --line-height-small: 1.5;
  --line-height: 1.7;

  // Small width
  @media (max-width: $media--small) {
    --conversation-padding-h: 1rem;
    --header-padding-h: 1rem;
    --message-padding-h: 0.75rem;
    --search-padding-h: 1rem;
  }

  // Full width
  @media (min-width: $media--small) {
    --conversation-padding-h: 2rem;
    --header-padding-h: 2rem;
    --message-padding-h: 1.5rem;
    --search-padding-h: 2rem;
  }

  font-size: 16px;

  &.theme--light,
  &:not(.theme--dark) {
    // Styles from Microsoft FluentUI (https://react.fluentui.dev/?path=/docs/theme-colors--page)
    --background-active: #a9d3f2;
    --background-bold: #f0f0f0;
    --background-error: #f1bbbc;
    --background-muted: #e0e0e0;
    --background: #ffffff;
    --border-active: #004377;
    --border: #c7c7c7;
    --color-active: #004377;
    --color-error: #751d1f;
    --color-muted: #737373;
    --color-visited: #58357f;
    --color: #242424;
  }

  &.theme--dark {
    // Colors come from Microsoft FluentUI (https://react.fluentui.dev/?path=/docs/theme-colors--page)
    --background-active: #004377;
    --background-bold: #000000;
    --background-error: #751d1f;
    --background-muted: #2e2e2e;
    --background: #141414;
    --border-active: #a9d3f2;
    --border: #737373;
    --color-active: #a9d3f2;
    --color-error: #f1bbbc;
    --color-muted: #c7c7c7;
    --color-visited: #d7c3e3;
    --color: #ffffff;
  }
}

body {
  background-color: var(--background);
  color: var(--color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-synthesis: none;
  font-weight: 400;
  hyphens: manual;
  line-height: var(--line-height);
  text-rendering: optimizeLegibility;
  word-break: break-word;

  // Reset styles
  appearance: none;

  // Hide scrollbar if not hovered
  * {
    &:hover {
      scrollbar-color: var(--background-muted) transparent;
    }

    &:not(:hover) {
      scrollbar-color: transparent transparent;
    }
  }

  // Code blocks
  pre,
  code,
  kbd,
  samp {
    &,
    * {
      font-family: var(--font-family-mono) !important;
    }
  }

  p,
  big,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  small {
    // Reset styles
    font: inherit;
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 900;
  }

  h1 {
    font-size: calc(var(--font-size) * 1.75);
  }

  h2 {
    font-size: calc(var(--font-size) * 1.5);
  }

  h3 {
    font-size: calc(var(--font-size) * 1.25);
  }

  i,
  em {
    font-style: italic;
  }

  strong,
  big {
    font-weight: bold;
  }

  big {
    font-size: calc(var(--font-size) * 2.25);
  }

  small {
    font-size: var(--font-size-small);
  }

  textarea,
  input {
    cursor: text;
  }

  select,
  a,
  button {
    cursor: pointer;
  }

  select,
  textarea,
  button,
  input,
  a:not(.a--unstyled) {
    &,
    &::placeholder,
    &:disabled,
    &[disabled] {
      color: var(--color);
    }

    &::placeholder,
    &:disabled,
    &[disabled] {
      cursor: default;
      opacity: 0.75;
    }
  }

  select,
  textarea,
  button,
  input {
    border-radius: var(--radius);
    padding: 0.75em 1em;

    // Reset styles
    border: unset;
    min-width: 0;
    line-height: var(--line-height-small);

    &:not(:disabled):not([disabled]) {
      &:hover {
        outline: 1px solid var(--border);
      }

      &:active,
      &:focus {
        outline: 3px solid var(--border-active);
      }
    }

    &,
    select {
      background-color: var(--background-muted);
      color: inherit;
      font-family: inherit;
    }
  }

  select,
  button {
    &,
    > * {
      // Disable line wrapping
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  a {
    color: inherit;
    text-decoration: none;

    &:not(.a--unstyled) {
      color: var(--color-active);

      &:not(:disabled):not([disabled]) {
        &:hover {
          text-decoration: underline;
        }

        &:visited {
          color: var(--color-visited);
        }
      }
    }

  }

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }
}

// "react-select" styles
.react-select {
  --react-select-padding-h: 1em;
  --react-select-padding-v: 0.25em;

  min-width: 0;

  &.react-select--is-disabled {
    .react-select__control {
      cursor: default;
      opacity: 0.75;
    }
  }

  &:not(.react-select--is-disabled) {
    .react-select__control {
      &.react-select__control--is-focused {
        cursor: text;
        outline: 3px solid var(--border-active) !important;
      }

      &:not(.react-select__control--is-focused) {
        &:hover {
          outline: 1px solid var(--border) !important;
        }
      }
    }
  }

  .react-select__control,
  .react-select__menu {
    border-radius: var(--radius);
  }

  .react-select__control {
    background-color: var(--background-muted);
    cursor: pointer;
    padding: 0 var(--react-select-padding-h);
    transition: none;

    .react-select__placeholder {
      opacity: 0.75;

      // Disable line wrapping
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .react-select__menu {
    background-color: var(--background);
    outline: 1px solid var(--border);
    overflow: hidden; // Hide the horizontal scrollbar, it mess with the layout
    width: min(16em, 150%); // 150% the width of the input, or 16em, whichever is smaller

    .react-select__menu-notice,
    .react-select__option {
      padding: var(--react-select-padding-v) var(--react-select-padding-h);
    }

    .react-select__group-heading {
      font-weight: bold;
      padding: calc(var(--react-select-padding-v) * 2) var(--react-select-padding-h);
    }

    .react-select__option {
      cursor: pointer;
      line-height: var(--line-height-small);

      &.react-select__option--is-focused {
        background-color: var(--background-muted);
      }
    }
  }
}
