mat-button-toggle {
  .mat-button-toggle-button {
    height: 32px;
    border: 1px solid var(--color-on-surface-neutral-disabled);
    border-radius: var(--border-radius-button);
    padding: 0 16px;
    transition: var(--transition-default);
    background-color: var(--color-surface-neutral-nested);
    &:hover {
      background-color: var(--color-surface-neutral-hover);
    }
    &:active {
      background-color: var(--color-surface-neutral-press);
    }
    .mat-button-toggle-label-content {
      color: var(--color-on-surface-neutral-primary);
      font-size: var(--font-size-button);
      padding: 0;
      height: 30px;
    }
    .mat-pseudo-checkbox {
      display: none !important;
    }
  }

  &.mat-button-toggle-checked {
    .mat-button-toggle-button {
      background-color: var(--color-surface-neutral-idle);
      color: var(--color-on-surface-alt-primary);
      border: 1px solid var(--color-on-surface-neutral-primary);
      &:hover {
        background-color: var(--color-surface-neutral-hover);
      }
      &:active {
        background-color: var(--color-surface-neutral-press);
      }
    }

    &.mat-button-toggle-disabled {
      .mat-button-toggle-button {
        background-color: var(--color-surface-alt-disabled);

        .mat-button-toggle-label-content {
          color: var(--color-on-surface-alt-primary)
        }
      }
    }
  }

  &.mat-button-toggle-disabled {
    pointer-events: none;

    .mat-button-toggle-button {
      border: 1px solid var(--color-surface-alt-disabled);

      .mat-button-toggle-label-content {
        color: var(--color-on-surface-neutral-disabled)
      }
    }
  }

  &.error {
    .mat-button-toggle-button {
      border: 1px solid var(--color-surface-danger-idle);

      .mat-button-toggle-label-content {
        color: var(--color-on-surface-danger-primary)
      }
    }

    &.mat-button-toggle-checked {
      .mat-button-toggle-button {
        background-color: var(--color-surface-danger-idle);
        color: var(--color-on-surface-alt-primary);

        .mat-button-toggle-label-content {
          color: var(--color-on-surface-alt-primary);
        }

        &:hover {
          background-color: var(--color-surface-danger-hover);
        }

        &:active {
          background-color: var(--color-surface-danger-press);
        }
      }

      &.mat-button-toggle-disabled {
        .mat-button-toggle-button {
          background-color: var(--color-surface-alt-disabled);

          .mat-button-toggle-label-content {
            color: var(--color-on-surface-alt-primary)
          }
        }
      }
    }

    &.mat-button-toggle-disabled {
      .mat-button-toggle-button {
        border: 1px solid var(--color-surface-alt-disabled);

        .mat-button-toggle-label-content {
          color: var(--color-on-surface-neutral-disabled)
        }
      }
    }
  }
}

mat-button-toggle-group{
  background-color: var(--color-surface-neutral-nested);
  height: 32px !important;
  position: relative;
  border-radius: var(--border-radius-button) !important;
  overflow: hidden;
  &:before{
    position: absolute;
    content: '';
    width: 100%;
    z-index: 0;
    height: 32px;
    border-radius: var(--border-radius-button) !important;
    border: 1px solid var(--color-on-surface-neutral-disabled) !important;
  }
  mat-button-toggle{
    .mat-button-toggle-button {
      border: 1px solid transparent !important;
      background-color: transparent;
    }
    &:hover{
      .mat-button-toggle-button {
        border: 1px solid var(--color-on-surface-neutral-disabled) !important;
        border-radius: 0 !important;
      }
    }
    &.mat-button-toggle-checked{
      .mat-button-toggle-button{
        background-color: var(--color-surface-neutral-idle) !important;
        border: 1px solid var(--color-on-surface-neutral-primary) !important;
        border-radius: var(--border-radius-interface) !important;
        .mat-button-toggle-label-content {
          color: var(--color-on-surface-neutral-primary) !important;
        }
      }
      &.mat-button-toggle-disabled{
        .mat-button-toggle-button{
          background-color: var(--color-surface-neutral-idle) !important;
          border: 1px solid var(--color-on-surface-neutral-disabled) !important;
          .mat-button-toggle-label-content {
            color: var(--color-on-surface-neutral-disabled) !important;
          }
        }
      }
    }
  }
  mat-button-toggle:first-of-type{
    .mat-button-toggle-button {
      border-top-left-radius: var(--border-radius-button) !important;
      border-bottom-left-radius: var(--border-radius-button) !important;
    }
  }
  mat-button-toggle:last-of-type{
    .mat-button-toggle-button {
      border-top-right-radius: var(--border-radius-button) !important;
      border-bottom-right-radius: var(--border-radius-button) !important;
      border-right-width: 1px;
    }
  }
}

/* Button with icons */

mat-button-toggle{
  .mat-button-toggle-label-content{
    display: flex;
    align-items: center;
    .material-symbols-rounded{
      font-size: var(--font-size-l);
    }
  }
  &.icon-left{
    .material-symbols-rounded{
      margin-right: 4px;
      margin-left: -4px;
    }
  }
  &.icon-right{
    .material-symbols-rounded{
      margin-left: 4px;
      margin-right: -4px;
    }
  }
  &.icon-left.icon-right{
    .material-symbols-rounded:first-of-type{
      margin-right: 4px !important;
      margin-left: -4px !important;
    }
  }
  &.icon-only{
    padding: 0 8px !important;
    .material-symbols-rounded{
      margin: 0 !important;
    }
    &.button-large{
      padding: 0 12px !important;
    }
    &.button-small{
      padding: 0 4px !important;
    }
  }
}

metron-filter{
  mat-button-toggle {
    &.mat-button-toggle-checked{
      .mat-button-toggle-button{
        border: 1px solid var(--color-on-surface-neutral-disabled);
        background-color: var(--color-surface-neutral-nested);
      }
    }
    &.active{
      .mat-button-toggle-button {
        background-color: var(--color-surface-neutral-idle);
        color: var(--color-on-surface-alt-primary);
        border: 1px solid var(--color-on-surface-neutral-primary);
        &:hover {
          background-color: var(--color-surface-neutral-hover);
        }
        &:active {
          background-color: var(--color-surface-neutral-press);
        }
      }
    }
    metron-notification-badge{
      margin-top: 5px;
      margin-left: 4px;
      margin-right: -4px;
    }
  }
}

metron-sort{
  mat-button-toggle {
      .mat-button-toggle-button{
        background-color: var(--color-surface-neutral-idle);
        color: var(--color-on-surface-alt-primary);
        border: 1px solid var(--color-on-surface-neutral-primary);
      }
    &.active{
      .mat-button-toggle-button {
        background-color: var(--color-surface-neutral-idle);
        color: var(--color-on-surface-alt-primary);
        border: 1px solid var(--color-on-surface-neutral-primary);
        &:hover {
          background-color: var(--color-surface-neutral-hover);
        }
        &:active {
          background-color: var(--color-surface-neutral-press);
        }
      }
    }
  }
}

.mat-button-toggle-checked .mat-button-toggle-button:has(.mat-button-toggle-checkbox-wrapper){
  padding-left: 16px !important;
}