modern_ui

@import "tailwindcss";
@plugin "../vendor/materialicons.js";

@theme {
  --color-background: rgba(255, 255, 255);
  --color-form-background: rgba(250, 250, 250);
  --color-primary: rgba(29, 78, 216);
  --color-primary-light: rgba(96, 165, 250);
  --color-primary-dark: rgba(30, 58, 138);
  --color-secondary: rgba(120, 113, 108);
  --color-secondary-light: rgba(214, 211, 209);
  --color-secondary-dark: rgba(51, 65, 85);
  --color-success: rgba(132, 204, 22);
  --color-success-light: rgba(217, 249, 157);
  --color-success-dark: rgba(77, 124, 15);
  --color-danger: rgba(239, 68, 68);
  --color-danger-light: rgba(254, 202, 202);
  --color-danger-dark: rgba(185, 28, 28);
  --color-warning: rgba(245, 158, 11);
  --color-warning-light: rgba(253, 230, 138);
  --color-warning-dark: rgba(180, 83, 9);
  --color-info: rgba(96, 165, 250);
  --color-info-light: rgba(219, 234, 254);
  --color-info-dark: rgba(59, 130, 246);
}

@theme {
  --font-icon-outlined: "MaterialSymbolsOutlined", "sans-serif";
}

[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block;
}

@utility form-select-icon {
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

@utility no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@utility scroll-container-v {
  overflow: auto;
  background: linear-gradient(
      var(--color-background) 30%,
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(rgba(255, 255, 255, 0), var(--color-background) 70%) 0 100%,
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 50% 100%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;

  background-repeat: no-repeat;
  background-color: var(--color-background);
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

  background-attachment: local, local, scroll, scroll;
}

@utility scroll-container-h {
  overflow: auto;

  background: linear-gradient(
      to right,
      var(--color-background) 30%,
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(
        to left,
        var(--color-background) 70%,
        rgba(255, 255, 255, 0)
      )
      100% 0,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      100%;

  background-repeat: no-repeat;
  background-color: var(--color-background);
  background-size: 16px 100%, 16px 100%, 8px 100%, 8px 100%;

  background-attachment: local, local, scroll, scroll;
}