@reference 'tailwindcss';

:host {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  color: var(--emr-segmented-button-color);
  font-size: var(--emr-segmented-button-font-size);
  min-width: var(--emr-segmented-button-min-width);
  border-radius: var(--emr-segmented-button-border-radius);
  gap: var(--emr-segmented-button-gap);
  flex: none;
  padding: var(--emr-segmented-button-padding);
  height: var(--emr-segmented-button-height);

  &.icon-only {
    --emr-segmented-button-min-width: 0;
    --emr-segmented-button-icon-offset-margin: 0;

    width: var(--emr-segmented-button-height);
    gap: 0;
    padding: 0;

    .content {
      display: none;
    }
  }

  .icon {
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: var(--emr-segmented-button-icon-offset-margin);

    ::ng-deep {
      .mat-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .icon {
    &:empty {
      display: none;
    }
  }

  &:hover {
    background-color: var(--emr-segmented-button-hover-bg);
    color: var(--emr-segmented-button-hover-color);
    text-decoration-line: none;
  }

  &.is-selected {
    pointer-events: none;
    background-color: var(--emr-segmented-button-selected-bg);
    color: var(--emr-segmented-button-selected-color);
    box-shadow: var(--emr-segmented-button-selected-shadow);
  }

  &:disabled,
  &.is-disabled {
    pointer-events: none;
    opacity: 65%;
  }
}
