
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@source "../../../../resources/views/**/*.blade.php";
@source "../../../../../resources/views/**/*.blade.php";
@source "../../../../docs/**/*.md";
@source "../../../blade-components/resources/views/**/*.blade.php";

@theme {
    --color-base-100: var(--color-base-100);
    --color-base-200: var(--color-base-200);
    --color-base-300: var(--color-base-300);
    --color-base-content: var(--color-base-content);
    --color-primary: var(--color-primary);
    --color-primary-content: var(--color-primary-content);
    --color-secondary: var(--color-secondary);
    --color-secondary-content: var(--color-secondary-content);
    --color-accent: var(--color-accent);
    --color-accent-content: var(--color-accent-content);
    --color-neutral: var(--color-neutral);
    --color-neutral-content: var(--color-neutral-content);
    --color-info: var(--color-info);
    --color-info-content: var(--color-info-content);
    --color-success: var(--color-success);
    --color-success-content: var(--color-success-content);
    --color-warning: var(--color-warning);
    --color-warning-content: var(--color-warning-content);
    --color-error: var(--color-error);
    --color-error-content: var(--color-error-content);
    --radius-selector: var(--radius-selector);
    --radius-field: var(--radius-field);
    --radius-box: var(--radius-box);
    --size-selector: var(--size-selector);
    --size-field: var(--size-field);
    --border: var(--border);
    --depth: var(--depth);
    --noise: var(--noise);
    --font-display: var(--font) , 'sans-serif';
    --font-weight-normal: var(--font-weight);
}

@layer components {
    .scrollbar-hidden {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .code-block-wrapper {
        padding: 2px !important;
        border: 1.5px solid oklab(0.707 -0.00331825 -0.0217483 / 0.4) !important;
        background-color: transparent;
        border-radius: 5px;
        position: relative;
        margin: .75rem 0 .75rem 0;
      }
      .code-frame .code-block-wrapper {
        margin: -2px !important;
        border: none !important;
        border-radius: 0 !important;
      }
      .code-frame .code-block-wrapper pre {
        padding:  1rem 0 1rem 0 !important ;
      }
      .code-container pre {
        border-radius: 5px !important;
        vertical-align: middle !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
        border: 1.5px solid oklab(0.707 -0.00331825 -0.0217483 / 0.4) !important;
      }

      .scrollbar-hidden::-webkit-scrollbar {
        display: none;
      }

    .btn {
        @apply inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-center gap-1.5 text-center align-middle no-underline outline-offset-2 select-none;
        padding-inline: var(--btn-p);
        color: var(--btn-fg);
        height: var(--size);
        font-size: 0.875rem;
        font-weight: 600;
        outline-color: var(--btn-color, var(--color-base-content));
        transition-property: color, background-color, border-color, box-shadow;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        transition-duration: 0.2s;
        border-start-start-radius: var(--join-ss, var(--radius-field));
        border-start-end-radius: var(--join-se, var(--radius-field));
        border-end-start-radius: var(--join-es, var(--radius-field));
        border-end-end-radius: var(--join-ee, var(--radius-field));
        background-color: var(--btn-bg);
        background-size: auto, calc(var(--noise) * 100%);
        background-image: none, var(--btn-noise);
        border-width: var(--border);
        border-style: solid;
        border-color: var(--btn-border);
        text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
        box-shadow:
            0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,
            var(--btn-shadow);
        --size: calc(var(--size-field, 0.25rem) * 10);
        --btn-bg: var(--btn-color, var(--color-base-200));
        --btn-fg: var(--color-base-content);
        --btn-p: 1rem;
        --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
        --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
            0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
        --btn-noise: var(--fx-noise);

        @media (hover: hover) {
            &:hover {
                --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
            }
        }

        &.btn-active {
            --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
            --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
            isolation: isolate;
        }

        &:focus-visible {
            outline-width: 2px;
            outline-style: solid;
        }

        &:active:not(.btn-active) {
            translate: 0 0.5px;
            --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
            --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
            --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
        }

        &:is(:disabled, [disabled], .btn-disabled) {
            &:not(.btn-link, .btn-ghost) {
                @apply bg-base-content/10;
                box-shadow: none;
            }

            @apply pointer-events-none;
            --btn-border: #0000;
            --btn-noise: none;
            --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);

            @media (hover: hover) {
                &:hover {
                    @apply pointer-events-none bg-neutral/20;
                    --btn-border: #0000;
                    --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
                }
            }
        }

        &:is(input[type="checkbox"], input[type="radio"]) {
            @apply appearance-none;

            /* &:not(.btn-square, .btn-circle) {
          @apply w-auto;
        } */

            &::after {
                content: attr(aria-label);
            }

            &:checked {
                --btn-color: var(--color-primary);
                --btn-bg: var(--color-primary);
                --btn-fg: var(--color-primary-content);
                --btn-border: var(--color-primary);

                &:focus-visible {
                    @apply outline-primary;
                }

                @media (hover: hover) {
                    &:hover {
                        --btn-bg: color-mix(in oklab, var(--color-primary) 90%, #000);
                        --btn-border: color-mix(in oklab, var(--color-primary) 90%, #000);
                    }
                }
            }
        }
    }

    .btn-primary {
        --btn-color: var(--color-primary);
        --btn-fg: var(--color-primary-content);
    }

    .btn-secondary {
        --btn-color: var(--color-secondary);
        --btn-fg: var(--color-secondary-content);
    }

    .btn-accent {
        --btn-color: var(--color-accent);
        --btn-fg: var(--color-accent-content);
    }

    .btn-neutral {
        --btn-color: var(--color-neutral);
        --btn-fg: var(--color-neutral-content);
    }

    .btn-info {
        --btn-color: var(--color-info);
        --btn-fg: var(--color-info-content);
    }

    .btn-success {
        --btn-color: var(--color-success);
        --btn-fg: var(--color-success-content);
    }

    .btn-warning {
        --btn-color: var(--color-warning);
        --btn-fg: var(--color-warning-content);
    }

    .btn-error {
        --btn-color: var(--color-error);
        --btn-fg: var(--color-error-content);
    }

    .btn-ghost {
        &:not(.btn-active, :hover, :active:focus, :focus-visible) {
            --btn-shadow: "";
            --btn-bg: #0000;
            --btn-border: #0000;
            --btn-noise: none;

            &:not(:disabled, [disabled], .btn-disabled) {
                @apply outline-current;
                --btn-fg: currentColor;
            }
        }
    }

    .btn-link {
        @apply underline outline-current;
        --btn-border: #0000;
        --btn-bg: #0000;
        --btn-fg: var(--color-primary);
        --btn-noise: none;
        --btn-shadow: "";

        &:is(.btn-active, :hover, :active:focus, :focus-visible) {
            @apply underline;
            --btn-border: #0000;
            --btn-bg: #0000;
        }
    }

    .btn-outline {
        &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
            --btn-shadow: "";
            --btn-bg: #0000;
            --btn-fg: var(--btn-color);
            --btn-border: var(--btn-color);
            --btn-noise: none;
        }
    }

    .btn-dash {
        &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
            --btn-shadow: "";
            border-style: dashed;
            --btn-bg: #0000;
            --btn-fg: var(--btn-color);
            --btn-border: var(--btn-color);
            --btn-noise: none;
        }
    }

    .btn-soft {
        &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
            --btn-shadow: "";
            --btn-fg: var(--btn-color, var(--color-base-content));
            --btn-bg: color-mix(in oklab,
                    var(--btn-color, var(--color-base-content)) 8%,
                    var(--color-base-100));
            --btn-border: color-mix(in oklab,
                    var(--btn-color, var(--color-base-content)) 10%,
                    var(--color-base-100));
            --btn-noise: none;
        }
    }

    .btn-xs {
        font-size: 0.6875rem;
        --btn-p: 0.5rem;
        --size: calc(var(--size-field, 0.25rem) * 6);
    }

    .btn-sm {
        font-size: 0.75rem;
        --btn-p: 0.75rem;
        --size: calc(var(--size-field, 0.25rem) * 8);
    }

    .btn-md {
        font-size: 0.875rem;
        --btn-p: 1rem;
        --size: calc(var(--size-field, 0.25rem) * 10);
    }

    .btn-lg {
        font-size: 1.125rem;
        --btn-p: 1.25rem;
        --size: calc(var(--size-field, 0.25rem) * 12);
    }

    .btn-xl {
        font-size: 1.375rem;
        --btn-p: 1.5rem;
        --size: calc(var(--size-field, 0.25rem) * 14);
    }

    .btn-square {
        @apply px-0;
        width: var(--size);
        height: var(--size);
    }

    .btn-circle {
        @apply px-0 rounded-full;
        width: var(--size);
        height: var(--size);
    }

    .btn-wide {
        @apply w-full max-w-64;
    }

    .btn-block {
        @apply w-full;
    }
}


/* START PERMALINK ICON */
.heading-permalink {
    visibility: hidden !important;
    float: left;
    padding-right: 4px;
    margin-left: -22px;
    line-height: 2rem;
    font-size: 25px;
    margin-bottom: 1rem !important;
  }

  .heading-permalink::after {
    content: '';
    background-position: center;
    display: flex;
    height: 1.5rem;
    width: 1.3rem;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' fill='gray' viewBox='0 0 16 16'%3E%3Cpath d='M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9q-.13 0-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z'/%3E%3Cpath d='M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.3rem;
  }

  h1 .heading-permalink::after {
    height: 2rem !important;
  }
  h2 .heading-permalink::after {
    height: 1.5rem !important;
  }
  h3 .heading-permalink::after {
    height: 1.2rem !important;
  }
  h4 .heading-permalink::after {
    height: 1.1rem !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-left: -3px !important;
  }

  h1:hover .heading-permalink,
  h2:hover .heading-permalink,
  h3:hover .heading-permalink,
  h4:hover .heading-permalink,
  h5:hover .heading-permalink,
  h6:hover .heading-permalink
  {
    cursor: pointer !important;
    visibility: visible !important;
  }

  @media screen and (max-width: 768px) {
    .heading-permalink {
        visibility: visible !important;
        float: left;
        padding-right: 2px;
        margin-left: -10px;
        line-height: 1;
        font-size: 20px;
        vertical-align: middle !important;
      }
 }
/* END PERMALINK ICON STYLES */

code .hl-gutter {
    display: none !important;
}

.code-block-wrapper .code-block-copy-button {
    @apply absolute text-base-300 stroke-gray-400 transition-opacity outline-none opacity-75 right-2 top-2  hover:text-primary hover:opacity-100 ;
}


pre .code-block-copy-button:hover,
pre .code-block-copy-button:focus,
pre .code-block-copy-button:active {
    @apply !text-primary outline-none dark:text-white;
}

/* @source "../views"; */
::-webkit-scrollbar {
    width: 10px;
}

html{
    scroll-padding-top: 80px;
}

@media screen and (max-width: 768px) {
    /* html {
        scroll-padding-top: 120px;
    } */
}

.table-of-contents a {
    text-underline-offset: 0.2em;
    text-decoration: none !important;
    @apply dark:text-gray-400 block py-1 leading-[1.6] font-medium dark:hover:text-purple-500 hover:text-purple-600 transition-colors text-gray-700;
}
.table-of-contents a:hover {
    text-decoration: none !important;
}
ul.table-of-contents li::marker {
    content: none;
}
ul.table-of-contents ul > li {
    @apply my-1 ps-3;
}

.blade ul {
    @apply pl-0 ml-0 list-none;
}

.blade ul li {
    @apply list-none;
}
