@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "@sass-palette/helper";
@use "@sass-palette/hope-config";

$enable-theme-color: map.has-key(
  meta.module-variables("hope-config"),
  "theme-colors"
);

.theme-color-title {
  display: block;

  margin: 0;
  padding: 0 0.25rem;

  color: var(--light-grey);

  font-weight: 600;
  font-size: 0.75rem;
  line-height: 2;

  transition: color var(--color-transition);
}

#theme-color-picker {
  display: flex;

  margin: 0;
  padding: 0;

  list-style-type: none;

  font-size: 14px;

  li {
    span {
      display: inline-block;
      vertical-align: middle;

      width: 15px;
      height: 15px;
      margin: 0 2px;
      border-radius: 2px;

      // original theme-color
      &.theme-color {
        background: helper.get-color(hope-config.$theme-color);

        #{hope-config.$dark-selector} {
          background: helper.get-dark-color(hope-config.$theme-color);
        }
      }
    }
  }
}

@if $enable-theme-color {
  @each $color in hope-config.$theme-colors {
    :root.theme-#{list.index(hope-config.$theme-colors, $color)} {
      --theme-color: #{$color};
      --theme-color-light: #{color.scale($color, $lightness: 10%)};
      --theme-color-dark: #{color.scale($color, $lightness: -10%)};
      --theme-color-mask: #{color.change($color, $alpha: 0.15)};
    }
  }
}