@use '../xui';

@mixin theme() {
  xui-decagram {
    display: inline-flex;
    width: fit-content;
    position: relative;

    xui-icon {
      width: 100%;
    }
  }

  .x-decagram-icon {
    position: absolute;
    inset: 0 0 0 0;
    margin-left: auto;
    margin-right: auto;
  }

  .x-decagram-triangle {
    padding-top: 5px;
  }

  @each $value in xui.$color-variations {
    .x-decagram-#{$value} {
      color: var(--color-#{$value}-default);

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