/*
 * This file contains the tailwind directives and equivalent styles
 * to replicate the behavior inside the Shadow DOM of native plugins.
 */

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

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
*/

html,
:host-context(div) {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body,
:host {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/**
*/

body,
:host {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* relative-priority-slider styles  */

.custom-transparent-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent; /* Make element background transparent */
  cursor: pointer;
}

/* Make the track transparent */
.custom-transparent-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 16px; /* Make track clickable area taller */
}

.custom-transparent-slider::-moz-range-track {
  background: transparent;
  height: 16px;
}

/* Optional: Style the thumb to look good on the gradient */
.custom-transparent-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-top: 0px; /* Adjust vertical centering of thumb if needed */
}

.custom-transparent-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
}

/* This rule applies only to screens with a max-width of 600px (typical for mobile phones) */
@media (max-width: 600px) {
  .desktop-only-hint {
    display: none !important;
  }
}
