@reference 'tailwindcss';

:host {
  display: block;
  box-shadow: theme(--shadow-sm);
  background: var(--color-neutral-950);
  color: var(--color-neutral-200);
  min-height: calc(var(--spacing) * 12);
  border-radius: theme(--radius-2xl);
  top: 1px;
  padding-inline-start: calc(var(--spacing) * 2);
  padding-inline-end: calc(var(--spacing) * 2);

  .button,
  ::ng-deep .button {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    display: flex;
    align-items: center;
    justify-content: center;
    --emr-icon-size: theme(--text-xl);
    border-radius: calc(infinity * 1px);

    &:hover {
      color: var(--color-tertiary-300);
      background-color: var(--color-neutral-700);
      padding: calc(var(--spacing) * 1.5);
    }

    &.active {
      color: var(--color-tertiary-300);
      background-color: var(--color-neutral-700);
    }

    mat-icon {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
      font-size: theme(--text-xl);
      line-height: 1.25;
    }

    &:disabled {
      pointer-events: none;
      opacity: 70%;
    }
  }

  .link {
    color: var(--color-tertiary-300);
    position: relative;
    top: 1px;

    &:hover {
      color: var(--color-tertiary-100);
    }
  }
}

:host-context(html.dark) {
  background: var(--color-tertiary-200);
  color: var(--color-neutral-900);

  .link {
    color: var(--color-tertiary-700);

    &:hover {
      color: var(--color-tertiary-800);
    }
  }
}
