@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;

@include b(audio) {
  @include set-component-css-var('audio', $audio);
}

@include b(audio) {
  display: inline-block;
  cursor: pointer;

  > span {
    --height: 18px;
    width: 3px;
    height: calc(var(--height) * var(--percent));
    // background: var(--colors-primary-base);
    background: getCssVar('audio', 'bg-color');
    display: inline-block;
    transition: height 0.2s linear;

    &:not(:last-child) {
      margin-right: 2px;
    }
  }

  audio {
    display: none;
  }
}
