@import "../../styles/variables";
@import "../../styles/global/functions";

:host {
  display: flex;
  position: relative;
  border-radius: 0.2em;
  &.striped {
    background-image: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.25) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(0, 0, 0, 0.25) 75%,
      transparent 75%,
      transparent
    );
    background-size: 20px 20px;
  }

  &.linear {
    width: 200px;
    height: 1.2em;
    background-color: $background;
    border: 1px solid $empty;
    overflow: hidden;
  }

  &.radial {
    width: 9.2em;
    height: 9.2em;
  }

  &.fit-container {
    width: 100%;
  }
}