@import '../fonts/ubuntu/ubuntu.css';
@import '../fonts/notosanssc/notosanssc.css';
@import '../fonts/mohave/mohave.css';

html {
  scroll-behavior: smooth;
}

* {
  --color-green: 78, 190, 81;
  --color-green-light: 131, 184, 62;
  --color-green-more-light: 219, 242, 219;
  --color-green-dark: 66, 171, 68;
  --color-green-more-dark: 39, 148, 41;
  --color-yellow: 221, 182, 61;
  --color-yellow-light: 246, 219, 125;
  --color-gray: 201, 202, 204;
  --color-secondary-text: 125, 126, 127;
  --color-secondary-light: 245, 247, 249;
  --color-gradient-from: 141, 189, 76;
  --color-gradient-to: 69, 172, 69;
  --color-primary-divider: 235, 237, 240;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-none: 0rem;
}

/* Private clients | Green */
[data-theme='pc'] {
  --color-primary-main: var(--color-green-dark);
  --color-primary-hover: 36, 131, 65;
  --color-primary-active: 36, 95, 52;
  --color-secondary-hover: 36, 131, 65;
  --color-secondary-active: 36, 95, 52;
}

/* Business clients | Light-Green */
[data-theme='bc'] {
  --color-primary-main: var(--color-green-light);
  --color-primary-hover: 92, 146, 29;
  --color-primary-active: 60, 94, 16;
  --color-secondary-hover: 92, 146, 29;
  --color-secondary-active: 60, 94, 16;
}

/* Ecosystem own | Yellow */
[data-theme='eo'] {
  --color-primary-main: var(--color-yellow);
  --color-primary-hover: 187, 151, 39;
  --color-primary-active: 126, 99, 12;
  --color-secondary-hover: 187, 151, 39;
  --color-secondary-active: 126, 99, 12;
}

/* Ultra | Brown */
[data-theme='ul'] {
  --color-primary-main: 185, 139, 109;
  --color-primary-hover: 146, 91, 56;
  --color-primary-active: 113, 64, 32;
  --color-secondary-hover: 146, 91, 56;
  --color-secondary-active: 113, 64, 32;
}

/* Premium | Light-Brown */
[data-theme='pr'] {
  --color-primary-main: 184, 160, 133;
  --color-primary-hover: 135, 98, 57;
  --color-primary-active: 100, 66, 27;
  --color-secondary-hover: 135, 98, 57;
  --color-secondary-active: 100, 66, 27;
}

@tailwind components;
@tailwind utilities;

@layer utilities {
  .rotate-180 {
    transform: rotate(180deg);
  }

  .-translate-x-full {
    transform: translateX(-100%);
  }

  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .horizontal-list {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
  }

  .vertical-list {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
  }

  .gradient-color-text {
    background: linear-gradient(
      180deg,
      rgb(var(--color-primary-main)) 0%,
      rgb(var(--color-yellow-light)) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-color-text-on-green {
    background: linear-gradient(
      180deg,
      rgb(var(--color-yellow-light)) 0%,
      rgb(var(--color-green-light)) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
  }

  .gradient-color-text-on-yellow {
    background: linear-gradient(
      180deg,
      rgb(var(--color-yellow)) 0%,
      rgb(var(--color-green-light)) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
  }

  input[type='range'].slider {
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
    border-radius: 5px;
    background-image: linear-gradient(
      rgb(var(--color-primary-main)),
      rgb(var(--color-primary-main))
    );
    background-repeat: no-repeat;
  }

  input[type='range'].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: rgb(var(--color-primary-main));
    cursor: pointer;
    box-shadow: none;
  }

  input[type='range'].slider::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: rgb(var(--color-primary-main));
    cursor: pointer;
    box-shadow: none;
  }

  input[type='range'].slider::-ms-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: rgb(var(--color-primary-main));
    cursor: pointer;
    box-shadow: none;
  }

  input[type='range'].slider:disabled {
    background-image: linear-gradient(rgb(var(--color-gray)), rgb(var(--color-gray)));
    pointer-events: none;
    cursor: default;
  }

  input[type='range'].slider:disabled::-webkit-slider-thumb {
    background: rgb(var(--color-gray));
  }

  input[type='range'].slider:disabled::-moz-range-thumb {
    background: rgb(var(--color-gray));
  }

  input[type='range'].slider:disabled::-ms-thumb {
    background: rgb(var(--color-gray));
  }

  /* Hide arrows */
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Hide arrows */
  input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
}

@layer components {
  [data-theme='eo'] .md-container ul {
    @apply list-none;
  }

  [data-theme='eo'] .md-container ul > li::before {
    @apply text-primary-main mr-3 font-bold;
    content: '🗸';
  }

  .md-container {
    @apply text-l font-sans;
    overflow: auto;
  }

  .md-container p.h1 {
    @apply text-h1;
  }

  .md-container blockquote {
    @apply text-m font-light group-data-primary:text-secondary-text;
  }

  .md-container p.h2 {
    @apply text-h2;
  }

  .md-container p.h3 {
    @apply text-h3;
  }

  .md-container p.h4 {
    @apply text-h4;
  }

  .md-container p.h5 {
    @apply text-h5;
  }

  .md-container p.h6 {
    @apply text-h6;
  }

  .md-container p {
    @apply text-l font-light;
  }

  .md-container ul {
    @apply list-inside list-disc;
  }

  .md-container ol {
    @apply list-inside list-decimal;
  }

  .md-container li {
    @apply text-l;
    list-style-position: initial;
    margin-left: 20px;
    padding-left: 0;
    padding-bottom: 6px;
  }

  .list-s.md-container li {
    @apply text-l font-light;
  }

  .list-m.md-container li {
    @apply text-h6;
  }

  .list-l.md-container li {
    @apply text-h5;
    margin-left: 23px;
  }

  .without-dots.md-container li,
  list-l.without-dots.md-container li {
    @apply list-outside list-none;
    margin-left: 0;
  }

  .md-container li > p {
    @apply inline;
  }

  .md-container a {
    @apply text-primary-main;
    font-weight: 400;
  }

  .md-container a {
    @apply group-data-secondary:text-white;
    font-weight: 400;
  }

  .md-container strong {
    @apply font-normal;
  }

  .secondary.md-container table {
    width: 100%;
    text-align: left;
  }

  .secondary.md-container table thead,
  .md-container table thead {
    color: rgb(var(--color-secondary-text));
  }

  .secondary.md-container table td,
  .secondary.md-container table th {
    padding: 8px 14px 5px;
  }

  .secondary.md-container table tbody tr:nth-child(2n-1) {
    background-color: rgb(var(--color-secondary-light));
  }

  .secondary.md-container ul li,
  .secondary.md-container ol li {
    color: rgb(125, 126, 127);
  }

  .primary.md-container ul li,
  .primary.md-container ol li {
    color: rgb(66, 171, 68);
  }

  .md-container table {
    width: 100%;
    text-align: left;
  }

  .md-container table td,
  .md-container table th {
    padding: 12px 8px 12px 0;
    font-size: 18px;
    min-width: 116px;
  }

  .md-container table tr {
    border-bottom: 1px solid rgb(var(--color-primary-divider));
  }
}

/*
  Styling Yandex Map element
 */
/* Hide yandex elements in yandex map */
[class$='-map-copyrights-promo'],
[class$='-copyrights-pane'] {
  display: none;
}