// _theme.scss - CSS variables and utility classes
@use "sass:color";
@use "sass:map";
@use "../utilities/colors" as COL;
@use "../abstracts/config" as VAR;

@if VAR.$generate-utility-classes {
  :root,
  #{VAR.$parent-selector} [data-theme="light"] {
    // Theme color CSS variables
    @each $color-name, $scale in COL.$colors {
      --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
      @each $shade, $value in $scale {
        --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
      }
    }

    // Primitive color CSS variables
    @each $color-name, $scale in COL.$colors-primitives {
      --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
      @each $shade, $value in $scale {
        --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
      }
    }

    @each $token in VAR.$theme-tokens {
      --#{$token}: #{map.get(VAR.$light-theme, $token)};
    }

    --button-text-color: #{map.get(VAR.$dark-theme, "text-default")};
    --inverted-text-color: #{map.get(VAR.$dark-theme, "text-default")};

    // Light theme variables
    --button-bg-color: var(--primary);
    --button-bg-color-hover: var(--primary-600);
    --link-color: var(--primary);
    --link-hover-color: var(--primary-600);

    // #{VAR.$parent-selector} {
    //   // Scrollbar styling
    //   &::-webkit-scrollbar {
    //     width: 12px;
    //   }

    //   &::-webkit-scrollbar-track {
    //     background: var(--background);
    //   }

    //   &::-webkit-scrollbar-thumb {
    //     background-color: #888;
    //     border-radius: 6px;
    //     border: 3px solid var(--background);
    //   }

    //   scrollbar-width: thin;
    //   scrollbar-color: #888 var(--background);
    // }
  }

  @if VAR.$enable-dark-mode {
    // Dark theme settings
    [data-theme="dark"] {
      @each $token in VAR.$theme-tokens {
        --#{$token}: #{map.get(VAR.$dark-theme, $token)};
      }

      --button-text-color: #{map.get(VAR.$light-theme, "text-default")};
      --inverted-text-color: #{map.get(VAR.$light-theme, "text-default")};
      --button-bg-color: var(--primary);
      --button-bg-color-hover: var(--primary-400);
      --link-color: var(--primary);
      --link-hover-color: var(--primary-400);

      &::-webkit-scrollbar-track {
        background: var(--background);
      }

      &::-webkit-scrollbar-thumb {
        background-color: #555;
        border: 3px solid var(--background);
      }

      scrollbar-color: #555 var(--background);
    }
  }

  // -----------------------------------------------
  // COLOR UTILITY CLASSES
  // -----------------------------------------------

  // Theme color background utilities
  // primar, secondry, warning etc.
  @each $color-name, $scale in COL.$colors {
    @each $shade, $value in $scale {
      // Automatic text contrast for backgrounds
      // todo: documentaton may add karo issay
      #{VAR.$parent-selector} .text-on-#{$color-name}-#{$shade} {
        color: COL.find-text-color($value);
      }

      #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
      #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
        color: var(--#{$color-name}-#{$shade});
      }

      #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
      #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
        background-color: var(--#{$color-name}-#{$shade});
      }

      #{VAR.$parent-selector} .border-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:border-#{$color-name}-#{$shade}:hover,
      #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
        border-color: var(--#{$color-name}-#{$shade});
      }
    }

    // Base color classes
    #{VAR.$parent-selector} .text-#{$color-name},
    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
    #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name} {
      color: var(--#{$color-name});
    }

    #{VAR.$parent-selector} .bg-#{$color-name},
    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
    #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
      background-color: var(--#{$color-name});
    }

    #{VAR.$parent-selector} .border-#{$color-name},
    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
      border-color: var(--#{$color-name});
    }
  }

  // Primitive color utilities
  // green, purple, pink etc.
  @each $color-name, $scale in COL.$colors-primitives {
    @each $shade, $value in $scale {
      #{VAR.$parent-selector} .text-on-#{$color-name}-#{$shade} {
        color: COL.find-text-color($value);
      }

      #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
      #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
        color: var(--#{$color-name}-#{$shade});
      }

      #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
      #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
        background-color: var(--#{$color-name}-#{$shade});
      }

      #{VAR.$parent-selector} .border-#{$color-name}-#{$shade},
      #{VAR.$parent-selector} .hover\:border-#{$color-name}-#{$shade}:hover,
      #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
        border-color: var(--#{$color-name}-#{$shade});
      }
    }

    // Base color classes
    #{VAR.$parent-selector} .text-#{$color-name},
    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
    #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name} {
      color: var(--#{$color-name});
    }

    #{VAR.$parent-selector} .bg-#{$color-name},
    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
    #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
      background-color: var(--#{$color-name});
    }

    #{VAR.$parent-selector} .border-#{$color-name},
    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
      border-color: var(--#{$color-name});
    }
  }

  // Semantic color utilities
  #{VAR.$parent-selector} .bg-page {
    background-color: var(--background);
  }

  #{VAR.$parent-selector} .bg-surface {
    background-color: var(--surface);
  }

  #{VAR.$parent-selector} .bg-active {
    background-color: var(--button-bg-color);
  }

  #{VAR.$parent-selector} .bg-hover {
    background-color: var(--button-bg-color-hover);
  }

  #{VAR.$parent-selector} .bg-white,
  .hover\:bg-white:hover {
    background-color: white;
  }

  #{VAR.$parent-selector} .bg-black,
  .hover\:bg-black:hover {
    background-color: black;
  }

  #{VAR.$parent-selector} .text-default {
    color: var(--text-default);
  }

  #{VAR.$parent-selector} .text-muted {
    color: var(--text-muted);
  }

  #{VAR.$parent-selector} .text-inverted {
    color: var(--inverted-text-color);
  }

  #{VAR.$parent-selector} .text-white,
  #{VAR.$parent-selector} .hover\:text-white:hover {
    color: white;
  }

  #{VAR.$parent-selector} .text-black,
  #{VAR.$parent-selector} .hover\:text-black:hover {
    color: black;
  }

  #{VAR.$parent-selector} .text-subtle {
    color: var(--text-muted);
    opacity: 0.7;
  }
}