@use '@xui/theme-core' as core;

@mixin theme() {
  .x-decagram {
    display: inline-flex;
    width: fit-content;
    position: relative;
    overflow: hidden;

    font-size: 16px;

    &-icon {
      position: absolute;
    }

    &-triangle {
      padding-top: 5px;
    }

    @each $value in core.$color-variations {
      &-#{$value} {
        color: var(--color-#{$value}-default);

        .x-decagram-icon {
          color: var(--color-#{$value}-default-contrast);
        }
      }
    }
  }
}