@import 'ol/ol.css';

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  html {
    @apply overflow-hidden
      w-screen;
  }

  body {
    color: var(--text-primary);

    @apply overflow-hidden
      w-screen;
  }

  /**
  * Buttons
  */
  .CMS_Button_base {
    @apply inline-flex
      items-center
      justify-center
      text-sm
      font-medium
      focus:outline-none
      focus:ring-4
      border;
  }

  .CMS_Button_root {
    @apply CMS_Button_base
      rounded
      px-2.5
      py-1.5;
  }

  .CMS_Button_root-sm {
    @apply CMS_Button_base
      rounded
      px-1.5
      py-0.5;
  }

  .CMS_Button_root-rounded {
    @apply CMS_Button_base
      p-1.5
      rounded-full;
  }

  .CMS_Button_root-rounded-sm {
    @apply CMS_Button_base
      p-0.5
      rounded-full;
  }

  .CMS_Button_root-rounded-no-padding {
    @apply CMS_Button_base
      rounded-full;
  }

  .CMS_Button_contained-primary {
    color: var(--primary-contrast-color);
    background: var(--primary-main);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      background: var(--primary-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--common-gray);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-primary {
    color: var(--primary-main);
    border-color: var(--primary-main);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary-dark) 8%, transparent);
      border-color: var(--primary-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: var(--common-gray);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-primary {
    color: var(--primary-main);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_contained-secondary {
    color: var(--text-primary);
    background: var(--common-gray);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      color: var(--primary-contrast-color);
      background: var(--primary-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: color-mix(in srgb, var(--common-gray) 50%, transparent);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-secondary {
    color: var(--text-primary);
    border-color: var(--common-gray);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary-dark) 8%, transparent);
      border-color: color-mix(in srgb, var(--primary-dark) 50%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: color-mix(in srgb, var(--common-gray) 50%, transparent);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-secondary {
    color: var(--text-primary);
    --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);

    &:hover {
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_contained-success {
    color: var(--success-contrast-color);
    background: var(--success-main);
    --tw-ring-color: color-mix(in srgb, var(--success-light) 50%, transparent);

    &:hover {
      background: var(--success-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--common-gray);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-success {
    color: var(--success-main);
    border-color: var(--success-main);
    --tw-ring-color: color-mix(in srgb, var(--success-light) 50%, transparent);

    &:hover {
      color: var(--success-dark);
      background: color-mix(in srgb, var(--success-dark) 8%, transparent);
      border-color: var(--success-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: var(--common-gray);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-success {
    color: var(--success-main);
    --tw-ring-color: color-mix(in srgb, var(--success-light) 50%, transparent);

    &:hover {
      color: var(--success-dark);
      background: color-mix(in srgb, var(--success-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_contained-error {
    color: var(--error-contrast-color);
    background: var(--error-main);
    --tw-ring-color: color-mix(in srgb, var(--error-light) 50%, transparent);

    &:hover {
      background: var(--error-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--common-gray);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-error {
    color: var(--error-main);
    border-color: var(--error-main);
    --tw-ring-color: color-mix(in srgb, var(--error-light) 50%, transparent);

    &:hover {
      color: var(--error-dark);
      background: color-mix(in srgb, var(--error-dark) 8%, transparent);
      border-color: var(--error-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: var(--common-gray);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-error {
    color: var(--error-main);
    --tw-ring-color: color-mix(in srgb, var(--error-light) 50%, transparent);

    &:hover {
      color: var(--error-dark);
      background: color-mix(in srgb, var(--error-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_contained-warning {
    color: var(--warning-contrast-color);
    background: var(--warning-main);
    --tw-ring-color: color-mix(in srgb, var(--warning-light) 50%, transparent);

    &:hover {
      background: var(--warning-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--common-gray);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-warning {
    color: var(--warning-main);
    border-color: var(--warning-main);
    --tw-ring-color: color-mix(in srgb, var(--warning-light) 50%, transparent);

    &:hover {
      color: var(--warning-dark);
      background: color-mix(in srgb, var(--warning-dark) 8%, transparent);
      border-color: var(--warning-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: var(--common-gray);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-warning {
    color: var(--warning-main);
    --tw-ring-color: color-mix(in srgb, var(--warning-light) 50%, transparent);

    &:hover {
      color: var(--warning-dark);
      background: color-mix(in srgb, var(--warning-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_contained-info {
    color: var(--info-contrast-color);
    background: var(--info-main);
    --tw-ring-color: color-mix(in srgb, var(--info-light) 50%, transparent);

    &:hover {
      background: var(--info-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--common-gray);
    }

    @apply border-transparent;
  }

  .CMS_Button_outlined-info {
    color: var(--info-main);
    border-color: var(--info-main);
    --tw-ring-color: color-mix(in srgb, var(--info-light) 50%, transparent);

    &:hover {
      color: var(--info-dark);
      background: color-mix(in srgb, var(--info-dark) 8%, transparent);
      border-color: var(--info-dark);
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: var(--common-gray);
    }

    @apply bg-transparent
      disabled:hover:bg-transparent;
  }

  .CMS_Button_text-info {
    color: var(--info-main);
    --tw-ring-color: color-mix(in srgb, var(--info-light) 50%, transparent);

    &:hover {
      color: var(--info-dark);
      background: color-mix(in srgb, var(--info-dark) 8%, transparent);
    }

    &:disabled {
      color: var(--text-disabled);
    }

    @apply bg-transparent
      border-transparent
      disabled:hover:bg-transparent;
  }

  /**
  * Checkbox
  */
  .checkbox {
    background: color-mix(in srgb, var(--primary-contrast-color) 50%, transparent);
    border-color: var(--primary-contrast-color);

    @apply w-4
      h-4
      rounded
      p-1.5
      focus:ring-2;

    &:focus {
      --tw-ring-color: color-mix(in srgb, var(--primary-light) 50%, transparent);
    }
  }
}

.dark .MuiDialog-root .MuiPaper-root.MuiDialog-paper {
  background-image: none;
  background-color: rgb(30 41 59);
}

.dark .MuiClockNumber-root.Mui-selected {
  color: white;
}

.CMS_Scrollbar_root {
  --scrollbar-foreground: var(--scrollbar-main);
  --scrollbar-background: var(--background-dark);
}

.CMS_Scrollbar_root.CMS_Scrollbar_secondary,
.MuiMultiSectionDigitalClock-root {
  --scrollbar-foreground: var(--scrollbar-light);
  --scrollbar-background: var(--background-main);
}

.CMS_Scrollbar_root,
.MuiMultiSectionDigitalClock-root {
  /* Foreground, Background */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

.CMS_Scrollbar_root::-webkit-scrollbar,
.MuiMultiSectionDigitalClock-root::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}

.CMS_Scrollbar_root::-webkit-scrollbar-corner,
.MuiMultiSectionDigitalClock-root::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

.CMS_Scrollbar_root::-webkit-scrollbar-thumb,
.MuiMultiSectionDigitalClock-root::-webkit-scrollbar-thumb {
  /* Foreground */
  background: var(--scrollbar-foreground);
}

.CMS_Scrollbar_root::-webkit-scrollbar-track,
.MuiMultiSectionDigitalClock-root::-webkit-scrollbar-track {
  /* Background */
  background: var(--scrollbar-background);
}

.CMS_Scrollbar_hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

.CMS_Scrollbar_hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

table {
  tbody {
    tr {
      &:last-child {
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;

        td {
          &:first-child {
            & > div {
              border-bottom-left-radius: 8px;
            }
          }

          &:last-child {
            & > div {
              border-bottom-right-radius: 8px;
            }
          }
        }
      }
    }
  }
}

.cms-icon {
  & > * {
    width: 24px;
    height: 24px;
  }
}

::-moz-focus-inner,
:focus-visible {
  @apply outline-none;
}

.MuiPopper-root {
  @apply z-[100];
}