:host {
  display: inline-block;
}

button {
  box-sizing: border-box;
  cursor: pointer;
  width: fit-content;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--scale-150);

  background-color: transparent;
  border-color: transparent;

  gap: var(--scale-100);
  // default is active false
  font-size: var(--typography-size-body-sm);
  line-height: var(--line-height-body-sm);
  padding: var(--scale-100) var(--scale-200);

  &:hover:not([disabled]) {
    background-color: var(--color-surface-action-solid-hover-light);
    color: var(--color-text-action-hover);
    span {
      color: var(--color-icon-action-hover);
    }
  }

  &*[disabled] {
    cursor: default;
    color: var(--color-text-disabled) !important;
    //spans contain icons
    span {
      color: var(--color-icon-disabled) !important;
    }
  }

  //span contains icons
  span {
    //first child is icon tag
    > * {
      display: flex;
      align-items: center;
    }

    i,
    svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }
  }

  // active is current
  &[active] {
    cursor: default;
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);

    //states
    &:hover {
      cursor: default;
      background-color: var(--color-surface-action-solid);
      color: var(--color-text-action-on);
      span {
        color: var(--color-text-action-on);
      }
    }

    &[disabled] {
      background-color: var(--color-surface-disabled-selected) !important;
      color: var(--color-text-disabled-on) !important;
    }
  }

  //states
  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 3px;
  }
}