.mdc-evolution-chip {
  &,
  &.mat-mdc-standard-chip {
    @extend .chip;
    --mdc-chip-elevated-disabled-container-color: var(--color-gray-300);

    &.chip__standard {
      @extend .chip__standard;
    }

    &.draft {
      background-color: var(--color-gray-50);
      color: var(--color-gray-500);
    }

    &.published {
      @extend .published;
    }

    &.archived {
      background-color: #F0F0F0;
      color: #676767;
    }

    &.chip--info, &.pending_review {
      @extend .chip--info;
    }

    &.chip--success, &.active {
      @extend .chip--success;
    }


    &.chip--warn, &.pending_data {
      @extend .chip--warn;
    }

    &.chip--danger, &.inactive, &.expired {
      @extend .chip--danger;
    }

    &.chip--selected {
      @extend .chip--selected;
    }

    &.chip--not-selected {
      @extend .chip--not-selected;
    }

    &.accepted {
      @extend .accepted;
    }

    &.cab_arrived_at_dropoff, &.cashed_in {
      @extend .cab_arrived_at_dropoff;
    }

    &.cab_arrived_at_intermediary_waypoint {
      @extend .cab_arrived_at_intermediary_waypoint;
    }

    &.cab_arrived_at_pickup {
      @extend .cab_arrived_at_pickup;
    }

    &.cancelled {
      @extend .cancelled;
    }

    &.completed, &.done {
      @extend .completed;
    }

    &.dispatched {
      @extend .dispatched;
    }

    &.in_progress {
      @extend .in_progress;
    }

    &.dropped_off {
      @extend .dropped_off;
    }

    &.no_show {
      @extend .no_show;
    }

    &.pending {
      @extend .pending;
    }

    &.rejected, &.suspended,
    &.cancelled, &.sick, &.no_show, &.unable_to_complete, &.unavailable, &.failed {
      @extend .rejected;
    }

    &.reserved, &.scheduled, &.ended {
      @extend .reserved;
    }

    &.trip_ended {
      @extend .trip_ended;
    }

    &.trip_ongoing {
      @extend .trip_ongoing;
    }

    &.trip_started, &.started {
      @extend .trip_started;
    }

    &.blacklisted {
      background-color: var(--color-gray-500);
      color: var(--color-white);
    }

    &[mat-ripple-loader-disabled] {
      &:hover .mat-mdc-chip-focus-overlay {
        opacity: 0;
      }
    }

    .mdc-evolution-chip__cell--primary {
      flex-basis: unset;
    }
  }

  .mat-icon {
    &,
    &:hover {
      color: inherit;
    }
  }

  &.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
    color: inherit;
  }

  &.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
    display: flex;
    align-items: center;
  }
}

.mdc-evolution-chip.mat-mdc-standard-chip[ng-reflect-disable-ripple]:not(.mdc-evolution-chip--disabled):active {
  box-shadow: none;
}

//V2 styles
ecabs-chip-group {
  .mat-mdc-chip-listbox {
    display: flex;
    flex-wrap: wrap;
    gap: calc-rem(8px);

    .mat-mdc-chip {
      --mdc-chip-elevated-container-color: var(--color-white);
      --mdc-chip-label-text-color: var(--color-gray-600);
      --mdc-chip-label-text-size: #{$font-size-sm};
      --mdc-chip-label-text-weight: #{$font-weight-medium};
      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
      --mdc-chip-selected-label-text-color: var(--color-white);

      border-radius: calc-rem($border-radius-medium);
      border: 1px solid var(--color-gray-200);
      color: var(--mdc-chip-label-text-color);

      &:hover {
        border-color: var(--color-gray-300);
      }
    }

    .mat-mdc-chip.mdc-evolution-chip--selected {
      border-color: transparent;

      .mdc-evolution-chip__action {
        color: var(--mdc-chip-selected-label-text-color);
      }
    }

    .mat-mdc-chip.mdc-evolution-chip--disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .mat-mdc-chip .mat-mdc-chip-graphic {
      display: none;
    }

    .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary {
      padding: 0;

      &:after {
        @extend %pseudos;

        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }

    .mat-mdc-chip .mdc-chip__ripple,
    .mat-mdc-chip .mat-ripple {
      display: none;
    }
  }
}

ecabs-chip-autocomplete {
  .mat-mdc-chip-grid {
    .mat-mdc-chip {
      --mdc-chip-elevated-container-color: var(--color-gray-100);
      --mdc-chip-label-text-color: var(--color-gray-600);
      --mdc-chip-label-text-size: #{$font-size-xs};
      --mdc-chip-label-text-weight: #{$font-weight-medium};
      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
      --mdc-chip-selected-label-text-color: var(--color-white);
      --mdc-chip-container-height: #{calc-rem(28px)};
      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--color-gray-600);
      --mdc-chip-with-avatar-avatar-shape-radius: 0;

      border-radius: calc-rem($border-radius-medium);
      padding-left: unset;
      padding-right: unset;
    }
  }

  .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing {
    width: calc-rem(14px);
    height: calc-rem(14px);
  }

  .mdc-evolution-chip-set .mdc-evolution-chip {
    margin-top: 0;
  }
}