libs/barista-components/toggle-button-group/src/toggle-button-item.scss
@import '../../core/src/style/variables';
@import '../../style/font-mixins';
@import '../../core/src/style/interactive-common';

:host {
  @include dt-main-font();
  appearance: none;
  display: inline-flex;
  position: relative;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  align-items: center;
  cursor: pointer;

  border-radius: 3px;
  border-width: 2px;
  border-style: solid;
  border-color: $gray-200;
}

:host:not([disabled]):focus {
  @include dt-focus-style();
}

:host.dt-toggle-button-item-disabled ::ng-deep .dt-toggle-button-item-icon {
  background-color: $gray-300;
}

.dt-toggle-button-item-content {
  padding-left: 16px;
  padding-right: 16px;
}

/** Left icon */
:host ::ng-deep .dt-toggle-button-item-icon {
  height: 52px;
  width: 52px;
  display: flex;
  margin-top: -1px;
  margin-left: -1px;
  margin-bottom: -1px;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: var(--dt-theme-main-default-color);
}

/** Hover state of the toggle button */
:host:hover ::ng-deep .dt-toggle-button-item-icon,
:host:hover.dt-toggle-button-item-selected
  ::ng-deep
  .dt-toggle-button-item-icon {
  background-color: var(--dt-theme-main-hover-color);
}
:host.dt-toggle-button-item-selected:hover {
  border-color: var(--dt-theme-main-hover-color);
}

/** Active state of the button */
:host.dt-toggle-button-item-selected {
  border-color: var(--dt-theme-main-default-color);
}
:host.dt-toggle-button-item-selected ::ng-deep .dt-toggle-button-item-icon {
  background-color: var(--dt-theme-main-default-color);
}

/* Disabled state */
:host.dt-toggle-button-item-disabled {
  color: $gray-300;
}

:host.dt-toggle-button-item-disabled ::ng-deep .dt-toggle-button-item-icon {
  background-color: $gray-300;
}

:host ::ng-deep .dt-icon {
  fill: #ffffff;
  width: 32px;
  height: 32px;
}
