@use "../mixin";

.MaterialChip {
  @include mixin.typescale-style("label-large");

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  position: relative;

  height: 32px;

  padding-inline: 12px;

  text-decoration: none !important;
  vertical-align: middle;

  border-color: transparent;
  border-radius: var(--md-sys-shape-corner-small);
  border-style: solid;
  border-width: 1px;

  background-color: transparent;

  cursor: pointer;
  overflow: hidden;
  transition:
    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
  user-select: none;
  -moz-user-select: none;

  span {
    @include mixin.material-symbols($size: 20);
  }

  &:active {
    border-radius: var(--md-sys-shape-corner-medium);
  }

  &.icon {
    padding-inline: 8px 12px;
  }

  &.elevated {
    color: var(--md-sys-color-primary);

    background-color: var(--md-sys-color-surface-container-low);

    box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
  }

  &.filled {
    color: var(--md-sys-color-on-primary);

    background-color: var(--md-sys-color-primary);
  }

  &.tonal {
    color: var(--md-sys-color-on-secondary-container);

    background-color: var(--md-sys-color-secondary-container);
  }

  &.outlined {
    color: var(--md-sys-color-on-surface-variant);

    border-color: var(--md-sys-color-outline-variant);
  }

  &.standard,
  &.text {
    color: var(--md-sys-color-primary);
  }
}
