@import "tailwindcss";

/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/* @tailwind variants; */

:root {
    --primary-color: black;
    --primary-color-hover: color-mix(in srgb, var(--primary-color), transparent 20%);
    --sl-input-border-radius-medium: 0.375rem;

    --sl-input-border-color-focus: var(--primary-color);
    --sl-input-focus-ring-color: none; /* color-mix(in srgb, var(--primary-color), transparent 89%); */

    --sl-color-primary-600: var(--primary-color);

    /* Changes the primary theme color to purple using primitives */
    /* --sl-color-primary-50: var(--sl-color-purple-50);
    --sl-color-primary-100: var(--sl-color-purple-100);
    --sl-color-primary-200: var(--sl-color-purple-200);
    --sl-color-primary-300: var(--sl-color-purple-300);
    --sl-color-primary-400: var(--sl-color-purple-400);
    --sl-color-primary-500: var(--sl-color-purple-500); */
    /* --sl-color-primary-600: var(--primary-color); */
    /* --sl-color-primary-700: var(--sl-color-purple-700);
    --sl-color-primary-800: var(--sl-color-purple-800);
    --sl-color-primary-900: var(--sl-color-purple-900);
    --sl-color-primary-950: var(--sl-color-purple-950); */
  }

@theme {
  --breakpoint-xs: 30rem;
}

sl-switch[checked]::part(control) {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

sl-switch[checked]::part(thumb) {
    border-color: var(--primary-color);
}

/* sl-button::part(base) { */
    /* box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
    /* border-radius: 0.375rem; */
/* } */

sl-button::part(spinner) {
    stroke-width: 5px;
}

sl-button[variant="primary"]::part(base) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

sl-button[variant="primary"]:not([loading])::part(base):hover {
    background: var(--primary-color-hover)
}


sl-button[variant="neutral"]::part(base) {
    background: #ffffff;
    border-color: #d1d5db;
    color: var(--primary-color);
}

sl-button[variant="neutral"]:not([loading])::part(base):hover {
  /* background: #f9fafb; */
  /* background: #f9fafb; */
  border-color: var(--primary-color)
}

sl-button[variant="danger"]::part(base) {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* :not([loading]) */
sl-button[variant="danger"]:not([loading])::part(base):hover {
    background: #b91c1c;
}


sl-button[variant="text"]::part(base) {
  color: var(--primary-color);
}

sl-button[variant="text"]::part(base):hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
  /* background-color: var(--color-neutral-200); */
}

sl-button[outline]::part(base):hover {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
  /* color: rgb(55 65 81); */
}

sl-button::part(label) {
    align-content: center;
    /* color: rgb(55 65 81); */
}

sl-option[aria-selected="true"]::part(base), sl-option[aria-selected="true"]::part(base):focus-visible  {
  background-color: var(--primary-color);
  /* color: rgb(55 65 81); */
}

sl-breadcrumb-item::part(separator) {
  margin: 2px;
}

/*

*/

sl-input[type], sl-textarea {
    border: none;
    width: 100%;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

sl-input::part(input), sl-textarea::part(textarea) {
    padding-left: 0.5em;
}

sl-input:focus {
  border: none;
  box-shadow: none;
}


sl-input[type]:focus {
    border: none;
    box-shadow: none;
}

sl-input::part(input), sl-textarea::part(textarea) {
    font-size: 0.9rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: black;
}

sl-input::part(form-control-label), sl-textarea::part(form-control-label) {
    font-weight: 450;
    /* color: rgb(55 65 81); */
}

@layer components {
    hr {
        @apply border-gray-300;
    }

    button {
        @apply cursor-pointer;
    }
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      border-color: var(--color-gray-200, currentColor);
    }
  }

  :focus-visible {
    outline: none;
  }

  @layer components {
    h1 {
      @apply text-3xl;
    }

    h2 {
      @apply text-2xl;
    }

    h3 {
      @apply text-xl;
    }

    h4 {
      @apply text-lg;
    }

    h1, h2, h3, h4, h5 {
      @apply font-bold;
    }

    .content a {
      @apply underline;
    }

    /* main p, main pre, main img, main h1, main h2, main h3, main h4, main h5 {
      @apply my-5;
    } */

    main pre {
      @apply p-2.5 text-base rounded overflow-x-scroll block bg-[#e9e9e9];
    }

    .content img {
      @apply block mx-auto my-10;
    }

    .content img, .content video {
      @apply max-w-full h-auto;
    }

    :not(pre) > code {
      @apply font-normal;
    }

    code {
      @apply text-[14px] font-normal;
    }

    .content p, .content pre, .content img, .content h1, .content h2, .content h3, .content h4, .content h5 {
        @apply my-5;
      }
  }


  :not(pre) > code {
    background-color: #e9e9e9;
    /* padding: 1px; */
    padding: 2px;
    border-radius: 3px;
  }
