@import 'theme.scss';

@mixin themeify {
  @each $theme-name,
  $theme-map in $themes {
    $theme-map: $theme-map !global;
    :host-context([data-nuoruo-theme="#{$theme-name}"]) & {
      @content;
    }
    [data-nuoruo-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin bc($color) {
  @include themeify {
    background-color: themed($color);
  }
}

@mixin c($color) {
  @include themeify {
    color: themed($color);
  }
}
@mixin fill($color) {
  @include themeify {
    fill: themed($color);
  }
}

@mixin border($color) {
  @include themeify {
    border: 1px solid themed($color);
  }
}
@mixin borderTop($color) {
  @include themeify {
    border-top: 1px solid themed($color);
  }
}
@mixin borderBottom($color) {
  @include themeify {
    border-bottom: 1px solid themed($color);
  }
}
@mixin borderRight($color) {
  @include themeify {
    border-right: 1px solid themed($color);
  }
}
@mixin borderLeft($color) {
  @include themeify {
    border-left: 1px solid themed($color);
  }
}
@mixin borderBottom($color) {
  @include themeify {
    border-bottom: 1px solid themed($color);
  }
}

@mixin white{
  :host-context([data-nuoruo-theme="white"]) & {
    @content;
  }
}
@mixin black {
  :host-context([data-nuoruo-theme="black"]) & {
    @content;
  }
}
.nuoruo-main {
  @include bc("bc");
  @include c("color");
}
.nuoruo-elipse {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示被省略的内容 */
}