@use "sass:color";

$esm-blue: #1e354d;
$esm-white: #fbfcfe;
$exile-red: #ce2d4e;
$exile-toast-red: #c62551;
$exile-toast-blue: #3ed3fb;
$exile-toast-green: #9fde3a;
$exile-toast-yellow: #deca39;
$exile-toast-orange: #c64a25;
$exile-toast-purple: #793ade;
$exile-toast-pink: #de3a9f;

$color-burnt-orange: #7d2f00;
$color-lavender: #344d71;
$color-steel-green: #2f4858;
$color-brown: #574143;
$color-sage: #e9f6d0;

$gray-light: #979ba1;
$gray: #2d3338;
$gray-dark: #202428;
$gray-x-dark: #181b1f;
$gray-xx-dark: #101317;

// Overwrite UIKit variables here.
$global-background: $gray-dark;
$form-disabled-background: $gray-dark;
$global-font-family: "Open Sans", sans-serif;
$button-default-background: $gray-dark;

@import "uikit/variables-theme";
@import "uikit/mixins-theme";
@import "uikit/uikit-theme";
@import "toast";
@import "fontawesome-6.4.2/fontawesome.scss";
@import "fontawesome-6.4.2/brands.scss";
@import "fontawesome-6.4.2/solid.scss";
@import "fontawesome-6.4.2/regular.scss";
@import "v-tooltip";
@import "dashboard";
@import "uk-switch";
@import "wiki";
// @import "vue-multiselect.min.css";

.multiselect {
  .multiselect__tags {
    background: $gray;
    border: 0;
    border-radius: 0;

    .multiselect__input,
    .multiselect__single {
      background-color: $gray;
      color: $gray-light;
    }
  }

  .multiselect__placeholder {
    color: $gray-light;
  }

  .multiselect__content-wrapper {
    background: $gray;
    color: $gray-light;
    border: 1px solid $gray-light;
  }

  .multiselect__option {
    padding-left: 2em;

    &.multiselect__option--group {
      padding-left: 1em;
      background: adjust-color($gray, $lightness: -5%);
      color: $gray-light;
    }

    &.multiselect__option--selected {
      background: $gray;
      color: $gray-light;
    }

    &.multiselect__option--disabled {
      background: adjust-color($gray, $lightness: -5%) !important;
    }
  }

  .multiselect__strong {
    color: $gray-light;
  }

  &.multiselect--disabled {
    .multiselect__tags,
    .multiselect__select {
      background: adjust-color($gray, $lightness: -5%) !important;
    }
  }
}

pre,
code {
  background: transparent !important;
  white-space: pre-wrap !important;
  padding: 0 !important;
}

pre {
  border: 0;
  color: $exile-red;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.uk-text-lead,
dt {
  color: $esm-white !important;
}

dd,
ol,
p,
label {
  color: $gray-light !important;
}

a,
em {
  color: $exile-red !important;
}

small {
  color: $gray-light;
}

a.uk-navbar-item,
a.uk-button-link {
  color: $esm-white !important;
}

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

hr {
  border-top-color: $gray !important;
}

.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
  border-top-color: $esm-blue !important;
  border-top-width: 2px;
}

.uk-list > li {
  color: $gray-light !important;
}

.uk-list-divider > :nth-child(n + 2) {
  border-top-color: $gray !important;
}

.uk-list-striped > li:nth-of-type(even) {
  background: $gray-dark;
}

.uk-list-striped > li:nth-of-type(odd) {
  background: #22262a;
  border-top: 0;
  border-bottom: 0;
}

.uk-table-striped > tr:nth-of-type(even),
.uk-table-striped tbody tr:nth-of-type(even) {
  background: $gray-dark;
}

.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
  background: #22262a;
  border-top: 0;
  border-bottom: 0;
}

select,
option,
.uk-select,
.uk-select option,
.uk-select:focus,
.uk-input,
.uk-input:focus,
.esm-button,
textarea,
.uk-textarea,
.uk-textarea:focus {
  background: $gray;
  color: $gray-light !important;
  border: 0;
}

.uk-input:disabled,
.uk-select:disabled {
  background: #22262a;
}

.uk-tab::before {
  border-bottom: none;
}

.uk-heading-bullet::before {
  border-left: 5px solid $exile-red;
}

.uk-tab > .uk-active > a {
  border-color: $exile-red;
}

.uk-modal-header {
  background: $gray-xx-dark;
  border: 0;
}

.uk-modal-dialog,
.uk-modal-footer {
  background: $gray-x-dark;
  border: 0;
}

.uk-checkbox {
  color: $gray-light;
}

.uk-card,
.uk-card-small,
.uk-card-large {
  border-left: 5px solid $exile-toast-green;
  background: #22262a;
  /* background: $gray; */
}

.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
  background: #22262a;
  filter: drop-shadow(0 0 30px rgba(30, 53, 77, 0.3));
}

.uk-card-info {
  border-left: 5px solid $exile-toast-blue;
}

.uk-card-error {
  border-left: 5px solid $exile-red;
}

.uk-checkbox:disabled,
.uk-radio:disabled {
  background-color: $gray-dark;
  border-color: $gray;
}

input::-webkit-input-placeholder {
  color: #64686f !important;
}

input:-moz-placeholder {
  /* Firefox 18- */
  color: #64686f !important;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: #64686f !important;
}

input:-ms-input-placeholder {
  color: #64686f !important;
}

.uk-subnav-divider > :nth-child(n + 2):not(.uk-first-column)::before {
  border-left: 1px solid $gray-light;
}

.uk-dropdown {
  background-color: $gray-dark;
  padding: 10px 0 10px 0;
  margin-top: 0;
}

.uk-navbar-dropdown-nav a {
  text-align: center;
  font-size: 1.3em;
  color: #999 !important;
}

.uk-navbar-dropdown-nav .uk-nav-header {
  color: $gray-light;
  padding-left: 10px;
}

.uk-navbar-dropdown-nav li:hover:not(.uk-nav-header):not(.uk-nav-divider) {
  background-color: $gray;
}

.uk-navbar-dropdown-nav .uk-nav-divider {
  border-top: 1px solid $gray-light;
  padding-bottom: 1px;
  margin: 5px;
}

.uk-button-default {
  border-color: $gray-x-dark;
  color: $esm-white;

  &:hover {
    background-color: $gray;
    color: $esm-white;
  }
}

.uk-button-secondary {
  background-color: $gray-dark;
}

.uk-button-secondary:hover {
  background-color: #15171a;
}

.uk-grid-divider > :not(.uk-first-column)::before {
  border-left: 1px solid $esm-blue;
}

/*
    ESM STYLES
*/
.esm-nav-primary {
  background: $gray-xx-dark !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.esm-nav-dropdown {
  background: $gray-xx-dark !important;
  left: 0px !important;
  top: 65px !important;
  width: 100% !important;
}

.esm-nav-dropdown > ul > li > a {
  font-size: 1.2rem;
  line-height: 1.5;
}

.esm-panel {
  margin: 2% 15% 0 15%;
  background-color: $gray-dark;
}

@media (max-width: $breakpoint-medium) {
  .esm-panel {
    margin: 0;
    background-color: $gray-x-dark;
  }
}

.id-lookup {
  margin-left: 15vw;
  margin-right: 15vw;
  background-color: $gray-dark;
  min-height: 25vh;
  padding: 2em 2em 2em 2em;

  .uk-table-striped tbody tr {
    border: 0 !important;
  }
}

@media (max-width: $breakpoint-medium) {
  .id-lookup {
    margin-left: 0;
    margin-right: 0;
  }
}

.esm-main-panel {
  padding-left: 10%;
}

.esm-description-commands dt {
  text-transform: lowercase !important;
}

.esm-list-reverse > li:nth-of-type(even) {
  background: #22262a;
}

.esm-list-reverse > li:nth-of-type(odd) {
  background: $gray-dark;
}

.esm-list-padding > li {
  padding: 10px 10px;
}

.esm-button:disabled {
  color: #6a6e75;
  background-color: #22262a;
}

.esm-button-confirm {
  background-color: $exile-toast-green;
  color: $esm-white !important;
}

.esm-button-confirm:hover {
  color: $esm-white;
  background-color: scale-color($exile-toast-green, $lightness: 20%);
}

.esm-button-confirm:disabled {
  background-color: #77ae1d;
}

.esm-button-danger {
  color: $esm-white !important;
  background-color: $exile-red;
}

.esm-button-danger:disabled {
  background-color: #a4243e;
}

.esm-button-blue {
  background-color: $exile-toast-blue;
  color: $esm-white !important;
}

.esm-button-blue:hover {
  color: $esm-white;
  background-color: scale-color($exile-toast-blue, $lightness: 20%);
}

.esm-button-blue:disabled {
  background-color: scale-color($exile-toast-blue, $lightness: -20%);
}

/*
    COLORS
*/
.esm-text-color-white,
.color-white {
  color: $esm-white !important;
}

.esm-text-color-red {
  color: $exile-red !important;
}

.esm-text-color-toast-red,
.color-red {
  color: $exile-toast-red !important;
}

.esm-text-color-toast-blue,
.color-blue {
  color: $exile-toast-blue !important;
}

.esm-text-color-toast-green,
.color-green {
  color: $exile-toast-green !important;
}

.esm-text-color-toast-yellow,
.color-yellow {
  color: $exile-toast-yellow !important;
}

.bg-color-yellow {
  background-color: $exile-toast-yellow !important;
}

.esm-text-color-toast-orange,
.color-orange {
  color: $exile-toast-orange !important;
}

.esm-text-color-toast-purple,
.color-purple {
  color: $exile-toast-purple !important;
}

.esm-text-color-toast-pink,
.color-pink {
  color: $exile-toast-pink !important;
}

.esm-text-subtle

/* It's gray... */ {
  color: $gray-light !important;
}

.esm-color-blue {
  color: $esm-blue !important;
}

.color-burnt-orange {
  color: $color-burnt-orange !important;
}

.color-lavender {
  color: $color-lavender !important;
}

.color-steel-green {
  color: $color-steel-green !important;
}

.color-brown {
  color: $color-brown !important;
}

.color-sage {
  color: $color-sage !important;
}

.esm-border-color-blue {
  border-color: $esm-blue !important;
}

.esm-bg-red {
  background: $exile-red !important;
}

.color-black {
  color: black !important;
}

.esm-account-button {
  background: $gray;
  color: $esm-white !important;
  border-radius: 200px;
  height: unset !important;
}

[v-cloak] {
  display: none;
}

/* https://github.com/tobiasahlin/SpinKit */
.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $exile-toast-blue;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

.esm-portal-nav-button {
  background-color: #22262a;
  padding: 2em 3em 1.2em 3em;
  display: inline-block;
}

.esm-portal-nav-button p {
  margin-bottom: 0;
}

.esm-portal-nav-button:hover {
  text-decoration: none;
  filter: drop-shadow(0 0 30px rgba(30, 53, 77, 0.3));
}

.steam-profile {
  // background-color: $gray-dark;
  // border: 2px solid $gray-x-dark;
  padding-top: 1.5em;
  margin-left: 0.5em;
  padding-bottom: 0.75em;
}

@media (min-width: $breakpoint-medium) {
  .steam-profile {
    // background-color: $gray-dark;
    // border: 2px solid $gray-x-dark;
    padding-top: 1.5em;
    margin-left: 1.5em;
    padding-bottom: 0.75em;
  }
}

.esm-download-changelog {
  * {
    color: $gray-light !important;
  }

  > ul {
    margin-bottom: 1em !important;
    list-style-type: none;
    padding-left: 0;
  }
}

.features-section-1 {
  padding-top: 15em;
  padding-bottom: 15em;
}

.features-section-2 {
  padding-top: 15em;
  padding-bottom: 15em;
  background-color: $gray-dark;
}

@media (max-width: $breakpoint-medium) {
  .features-section-1 {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .features-section-2 {
    padding-top: 5em;
    padding-bottom: 5em;
    background-color: $gray-dark;
  }
}

.message-configuration-list {
  max-height: 70vh;
}

.message-configuration-list > li,
.message-preview {
  padding: 1em 1em 1em 1em;
  margin-bottom: 0.5em;
  border-left: 5px solid $exile-toast-blue;
  background-color: $gray-dark;

  a {
    font-size: larger;
  }

  p {
    margin: 0 !important;
  }

  code {
    padding: 2px 3px;
  }

  .header {
    margin-bottom: 0.25em;

    img {
      margin-right: 0.5em;
    }
  }

  .title {
    font-weight: bolder;
    margin-bottom: 0.25em;
  }
}

@media (max-width: $breakpoint-medium) {
  .message-configuration-list {
    max-height: 52vh;
  }

  .message-configuration-list > li {
    a {
      font-size: x-large;
    }
  }
}

.select-all {
  -webkit-user-select: all;
  /* Chrome all / Safari all */
  -moz-user-select: all;
  /* Firefox all */
  -ms-user-select: all;
  /* IE 10+ */
  user-select: all;
  /* Likely future */
}

span[uk-tooltip] {
  cursor: pointer;
}

.clickable {
  cursor: pointer;
}

.danger-zone {
  > h2 {
    color: $exile-red;
  }

  > div {
    border: 2px solid $exile-red;
    border-radius: 0.5em;
    padding: 1em 1em 1em 1em;
  }
}

.navbar-icon {
  min-height: 60px !important;
}

.exile-toast {
  padding: 1em 1em 1em 1em;
  background-color: $gray;

  &.warning {
    border-left: 0.3em solid $exile-toast-yellow;
  }
}

.alert {
  strong {
    color: $esm-white;
  }

  &.alert-info {
    background: color.adjust($color-steel-green, $lightness: -10%);
    border: 1px solid $color-steel-green;
  }

  &.alert-warn {
    $color: color.adjust($exile-toast-yellow, $lightness: -10%);

    border: 1px solid $color;
    background: color.adjust($color, $lightness: -25%);
    color: color.adjust($color, $lightness: 5%);
  }
}