@reference 'tailwindcss';

:host {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
  user-select: none;
  width: var(--emr-tab-panel-item-width);
  height: var(--emr-tab-panel-item-height);
  padding: var(--emr-tab-panel-item-padding);
  border-radius: var(--emr-tab-panel-item-border-radius);
  color: var(--emr-tab-panel-item-color);
  gap: var(--emr-tab-panel-item-gap);

  &:not(.is-active):hover {
    background: var(--emr-tab-panel-item-hover-bg);
    color: var(--emr-tab-panel-item-hover-color);
  }

  &.is-active {
    background: var(--emr-tab-panel-item-active-bg);
    color: var(--emr-tab-panel-item-active-color);
  }

  .icon {
    line-height: 0;
    display: inline-block;

    &:empty {
      display: none;
    }
  }

  .text {
    top: -1px;
    white-space: nowrap;
    position: relative;
    line-height: 1;
  }
}

:host-context(.emr-tab-panel.is-compact) {
  width: var(--emr-tab-panel-compact-item-width);
  height: var(--emr-tab-panel-compact-item-height);

  .text {
    display: none;
  }
}
