/*!
 * Copyright (c) 2024 PLANKA Software GmbH
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

:global {
  #app {
    background: #22252a;
    overflow-x: auto;

    &::-webkit-scrollbar {
      height: auto;
    }

    .mentions-input {
      &__highlighter {
        line-height: 1.4;
        padding: 8px 12px;
      }

      &__suggestions {
        border: 1px solid #d4d4d5;
        border-radius: 3px;
        box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25),
          0 0 0 1px rgba(9, 45, 66, 0.08);
        max-height: 200px;
        overflow-y: auto;

        &__item {
          padding: 8px 12px;

          &--focused {
            background-color: rgba(0, 0, 0, 0.05);
            color: rgba(0, 0, 0, 0.95);
          }
        }
      }
    }

    .react-datepicker {
      border: 0;
      color: #444444;
      font-size: 14px;
      font-family: "Nunitoga", "Helvetica Neue", Arial, Helvetica, sans-serif;
      // font-weight: normal;
      width: 100%;
      padding-bottom: 8px;
    }

    .react-datepicker__month-container {
      width: 100%;
    }

    .react-datepicker__current-month,
    .react-datepicker-time__header {
      color: #444;
      font-weight: normal;
      font-size: 14px;
      line-height: 32px;
      padding-bottom: 4px;
      text-transform: capitalize;
    }

    .react-datepicker__header {
      background: #fff;
      border: 0;
      padding: 0;
    }

    .react-datepicker__day-name,
    .react-datepicker__day,
    .react-datepicker__time-name {
      color: #444;
      display: inline-block;
      width: 40px;
      font-weight: normal;
      line-height: 28px;
      text-align: center;
      margin: 0;
      border-style: solid;
      border-width: 0 0 1px 1px;
      border-color: rgba(34, 36, 38, 0.15);
    }

    .react-datepicker__day--selected,
    .react-datepicker__day--in-selecting-range,
    .react-datepicker__day--in-range {
      border-radius: 0;
      background: #216ba5;
      color: #fff;
    }

    .react-datepicker__day-names,
    .react-datepicker__week {
      border-right: 1px solid #c2ccd1;
    }

    .react-datepicker__day-names {
      background: #ebeef0;
      border-top: 1px solid #c2ccd1;
    }

    .react-datepicker__day--outside-month {
      color: transparent;
      background: #f5f6f7;
    }

    .react-datepicker__month {
      margin: 0.4rem 0 0;
    }

    .react-datepicker__navigation--previous,
    .react-datepicker__navigation--next {
      outline: none;
    }

    .react-datepicker__navigation--previous {
      left: 0;
      border-right-color: #999;
    }

    .react-datepicker__navigation--next {
      right: 0;
      border-left-color: #999;
    }

    .react-datepicker__navigation {
      border-width: 7px 9px;
      top: 0;
    }

    .react-datepicker__day {
      outline: none;

      &:hover {
        border-radius: 0;
      }
    }

    .pswp .pswp__img--placeholder {
      display: none !important;
    }

    .ui.input.error > input {
      background-color: #fff6f6 !important;
      border-color: #e0b4b4 !important;
      color: #9f3a38 !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
    }

    .ui.page.dimmer {
      -webkit-perspective: none;
      perspective: none;
    }
  }

  #root {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .g-root {
    --g-font-family-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
    --g-font-family-sans: "Nunitoga", "Helvetica Neue", Arial, Helvetica, sans-serif !important;

    .g-md-settings-content__separator,
    .g-md-settings-content__toolbar,
    .g-md-settings-content__version {
      display: none;
    }
  }

  .yfm {
    --yfm-color-text-private: #17394d !important;
    --yfm-font-family-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
    --yfm-font-family-sans: "Nunitoga", "Helvetica Neue", Arial, Helvetica, sans-serif !important;

    font-size: 1em !important;

    a:hover {
      color: var(--yfm-color-link) !important;
      text-decoration: underline;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 1.25 !important;
    }

    h1 {
      font-size: 2em !important;
    }

    h2 {
      font-size: 1.5em !important;
    }

    h3 {
      font-size: 1.25em !important;
    }

    h4 {
      font-size: 1em !important;
    }

    h5 {
      font-size: .875em !important;
    }

    h6 {
      font-size: .85em !important;
    }

    .mention {
      color: #0366d6;
      background-color: #f1f8ff;
      border-radius: 3px;
      padding: 0 2px;
    }

    .yfm-clipboard:hover {
      .yfm-clipboard-button {
        min-height: auto;
        min-width: auto;
      }
    }
  }

  .hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #333;
    background: #f8f8f8
  }

  .hljs-comment,
  .hljs-quote {
    color: #998;
    font-style: italic
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-subst {
    color: #333;
    font-weight: bold;
  }

  .hljs-literal,
  .hljs-number,
  .hljs-tag .hljs-attr,
  .hljs-template-variable,
  .hljs-variable {
    color: teal
  }

  .hljs-doctag,
  .hljs-string {
    color: #d14
  }

  .hljs-section,
  .hljs-selector-id,
  .hljs-title {
    color: #900;
    font-weight: bold;
  }

  .hljs-subst {
    font-weight: normal
  }

  .hljs-class .hljs-title,
  .hljs-type {
    color: #458;
    font-weight: bold;
  }

  .hljs-attribute,
  .hljs-name,
  .hljs-tag {
    color: navy;
    font-weight: normal
  }

  .hljs-link,
  .hljs-regexp {
    color: #009926
  }

  .hljs-bullet,
  .hljs-symbol {
    color: #990073
  }

  .hljs-built_in,
  .hljs-builtin-name {
    color: #0086b3
  }

  .hljs-meta {
    color: #999;
    font-weight: bold;
  }

  .hljs-deletion {
    background: #fdd
  }

  .hljs-addition {
    background: #dfd
  }

  .hljs-emphasis {
    font-style: italic
  }

  .hljs-strong {
    font-weight: bold;
  }

  ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    -webkit-appearance: none;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0.15);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 135, 139, 0.8);
  }
}

:global(#app) {
  &.dragging > * {
    pointer-events: none;
  }

  &.dragScrolling > * {
    pointer-events: none;
    user-select: none;
  }

  /* Backgrounds */

  .backgroundMuddyGrey {
    background: #69655a !important;
  }

  .backgroundAutumnLeafs {
    background: #c9b037 !important;
  }

  .backgroundMorningSky {
    background: #52b9d5 !important;
  }

  .backgroundAntiqueBlue {
    background: #6c99bb !important;
  }

  .backgroundEggYellow {
    background: #f9c423 !important;
  }

  .backgroundDesertSand {
    background: #fad371 !important;
  }

  .backgroundDarkGranite {
    background: #8b8680 !important;
  }

  .backgroundFreshSalad {
    background: #ced85e !important;
  }

  .backgroundLagoonBlue {
    background: #109dc0 !important;
  }

  .backgroundMidnightBlue {
    background: #0a63a0 !important;
  }

  .backgroundLightOrange {
    background: #fdae5f !important;
  }

  .backgroundPumpkinOrange {
    background: #ed9223 !important;
  }

  .backgroundLightConcrete {
    background: #afb0a4 !important;
  }

  .backgroundSunnyGrass {
    background: #beca02 !important;
  }

  .backgroundNavyBlue {
    background: #1d7299 !important;
  }

  .backgroundLilacEyes {
    background: #406cbd !important;
  }

  .backgroundApricotRed {
    background: #fc736c !important;
  }

  .backgroundOrangePeel {
    background: #de692f !important;
  }

  .backgroundSilverGlint {
    background: linear-gradient(160deg, #adadad, #92908d, #e2e2e2, #928e8e, #726f6e) !important;
  }

  .backgroundBrightMoss {
    background: #96b352 !important;
  }

  .backgroundDeepOcean {
    background: #004c70 !important;
  }

  .backgroundSummerSky {
    background: #5d9cec !important;
  }

  .backgroundBerryRed {
    background: #e83855 !important;
  }

  .backgroundLightCocoa {
    background: #a85540 !important;
  }

  .backgroundGreyStone {
    background: #aab2bd !important;
  }

  .backgroundTankGreen {
    background: #8aa177 !important;
  }

  .backgroundCoralGreen {
    background: #2b6a6c !important;
  }

  .backgroundSugarPlum {
    background: #7e86c7 !important;
  }

  .backgroundPinkTulip {
    background: #e34f7c !important;
  }

  .backgroundShadyRust {
    background: #87564a !important;
  }

  .backgroundWetRock {
    background: #83949b !important;
  }

  .backgroundWetMoss {
    background: #4a8753 !important;
  }

  .backgroundTurquoiseSea {
    background: #00858a !important;
  }

  .backgroundLavenderFields {
    background: #b287bd !important;
  }

  .backgroundPiggyRed {
    background: #f97394 !important;
  }

  .backgroundLightMud {
    background: #c7a57a !important;
  }

  .backgroundGunMetal {
    background: #4f6573 !important;
  }

  .backgroundModernGreen {
    background: #77ce87 !important;
  }

  .backgroundFrenchCoast {
    background: #00b4b1 !important;
  }

  .backgroundSweetLilac {
    background: #975298 !important;
  }

  .backgroundRedBurgundy {
    background: #ad5f7d !important;
  }

  .backgroundPirateGold {
    background: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07) !important;
  }

  .backgroundOceanDive {
    background: linear-gradient(to top, #062e53, #1ad0e0) !important;
  }

  .backgroundOldLime {
    background: linear-gradient(to bottom, #7b920a, #add100) !important;
  }

  .backgroundTzepeschStyle {
    background: linear-gradient(to bottom, #190a05, #870000) !important;
  }

  .backgroundJungleMesh {
    background: linear-gradient(to bottom, #727a17, #414d0b) !important;
  }

  .backgroundBlueDanube {
    background: radial-gradient(circle, rgba(9, 9, 121, 1) 0%, rgba(2, 0, 36, 1) 0%, rgba(2, 29, 66, 1) 0%, rgba(2, 41, 78, 1) 0%, rgba(2, 57, 95, 1) 0%, rgba(1, 105, 144, 1) 100%, rgba(1, 151, 192, 1) 100%, rgba(0, 212, 255, 1) 100%) !important;
  }

  .backgroundSundownStripe {
    background: linear-gradient(22deg, rgba(31, 30, 30, 1) 0%, rgba(255, 128, 0, 1) 10%, rgba(255, 128, 0, 1) 41%, rgba(0, 0, 0, 1) 41%, rgba(0, 102, 204, 1) 89%) !important;
  }

  .backgroundMagicalDawn {
    background: radial-gradient(circle, rgba(0, 107, 141, 1) 0%, rgba(0, 69, 91, 1) 90%) !important;
  }

  .backgroundStrawberryDust {
    background: linear-gradient(180deg, rgba(172, 79, 115, 1) 0%, rgba(254, 158, 150, 1) 66%) !important;
  }

  .backgroundPurpleRose {
    background: linear-gradient(128deg, rgba(116, 43, 62, 1) 19%, rgba(192, 71, 103, 1) 90%) !important;
  }

  .backgroundSunScream {
    background: linear-gradient(112deg, rgba(251, 221, 19, 1) 19%, rgba(255, 153, 1, 1) 62%) !important;
  }

  .backgroundWarmRust {
    background: linear-gradient(141deg, rgba(255, 90, 8, 1) 0%, rgba(88, 0, 0, 1) 96%) !important;
  }

  .backgroundSkyChange {
    background: linear-gradient(135deg, rgba(0, 52, 89, 1) 0%, rgba(0, 168, 232, 1) 90%) !important;
  }

  .backgroundGreenEyes {
    background: linear-gradient(138deg, rgba(19, 170, 82, 1) 0%, rgba(0, 102, 43, 1) 90%) !important;
  }

  .backgroundBlueXchange {
    background: radial-gradient(circle, #294f83, #162c4a) !important;
  }

  .backgroundBloodOrange {
    background: linear-gradient(360deg, #d64759 10%, #da7352 360%) !important;
  }

  .backgroundSourPeel {
    background: linear-gradient(360deg, #fd6f46 10%, #fb9832 360%) !important;
  }

  .backgroundGreenNinja {
    background: linear-gradient(360deg, #224e4d 10%, #083023 360%) !important;
  }

  .backgroundIceBlue {
    background: linear-gradient(360deg, #38aecc 10%, #347fb9 360%) !important;
  }

  .backgroundEpicGreen {
    background: linear-gradient(360deg, #01a99c 10%, #0698b1 360%) !important;
  }

  .backgroundAlgaeGreen {
    background: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 95, 104, 1) 0%, rgba(15, 156, 168, 1) 90%) !important;
  }

  .backgroundCoralReef {
    background: linear-gradient(110.3deg, rgba(238, 179, 123, 1) 8.7%, rgba(216, 103, 77, 1) 47.5%, rgba(114, 43, 54, 1) 89.1%) !important;
  }

  .backgroundSteelGrey {
    background: radial-gradient(circle farthest-corner at -4% -12.9%, rgba(74, 98, 110, 1) 0.3%, rgba(30, 33, 48, 1) 90.2%) !important;
  }

  .backgroundHeatWaves {
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59) !important;
  }

  .backgroundWowBlue {
    background: linear-gradient(111.8deg, rgba(0, 104, 155, 1) 19.8%, rgba(0, 173, 239, 1) 92.1%) !important;
  }

  .backgroundVelvetLounge {
    background: radial-gradient(circle farthest-corner at 10% 20%, rgba(151, 10, 130, 1) 0%, rgba(33, 33, 33, 1) 100.2%) !important;
  }

  .backgroundLagoon {
    background: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 107, 141, 1) 0%, rgba(0, 69, 91, 1) 90%) !important;
  }

  .backgroundPurpleRain {
    background: linear-gradient(91.7deg, rgba(50, 25, 79, 1) -4.3%, rgba(122, 101, 149, 1) 101.8%) !important;
  }

  .backgroundBlueSteel {
    background: linear-gradient(to top, #09203f 0%, #537895 100%) !important;
  }

  .backgroundBlueishCurve {
    background: linear-gradient(171.8deg, rgba(5, 111, 146, 1) 13.5%, rgba(6, 57, 84, 1) 78.6%) !important;
  }

  .backgroundPrismLight {
    background: linear-gradient(111.7deg, rgba(251, 198, 6, 1) 2.4%, rgba(224, 82, 95, 1) 28.3%, rgba(194, 78, 154, 1) 46.2%, rgba(32, 173, 190, 1) 79.4%, rgba(22, 158, 95, 1) 100.2%) !important;
  }

  .backgroundTheBow {
    background: radial-gradient(circle farthest-corner at -8.9% 51.2%, rgba(255, 124, 0, 1) 0%, rgba(255, 124, 0, 1) 15.9%, rgba(255, 163, 77, 1) 15.9%, rgba(255, 163, 77, 1) 24.4%, rgba(19, 30, 37, 1) 24.5%, rgba(19, 30, 37, 1) 66%) !important;
  }

  .backgroundGreenMist {
    background: linear-gradient(180.5deg, rgba(0, 128, 128, 1) 8.5%, rgba(174, 206, 100, 1) 118.2%) !important;
  }

  .backgroundRedCurtain {
    background: radial-gradient(circle 371px at 2.9% 14.3%, rgba(255, 0, 102, 1) 0%, rgba(80, 5, 35, 1) 100.7%) !important;
  }

  /* Colors */

  .colorBerryRed {
    color: #e83855 !important;
  }

  .colorPumpkinOrange {
    color: #ed9223 !important;
  }

  .colorLagoonBlue {
    color: #109dc0 !important;
  }

  .colorPinkTulip {
    color: #e34f7c !important;
  }

  .colorLightMud {
    color: #c7a57a !important;
  }

  .colorOrangePeel {
    color: #de692f !important;
  }

  .colorBrightMoss {
    color: #96b352 !important;
  }

  .colorAntiqueBlue {
    color: #6c99bb !important;
  }

  .colorDarkGranite {
    color: #8b8680 !important;
  }

  .colorTurquoiseSea {
    color: #00858a !important;
  }
}