/********************************************************************************
 * Eclipse Tractus-X - Industry Core Hub Frontend
 *
 * Copyright (c) 2025 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Apache License, Version 2.0 which is available at
 * https://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the
 * License for the specific language govern in permissions and limitations
 * under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
********************************************************************************/

@use '../../config/variables' as *;

.filter-chips-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;

  .filter-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    .filter-chip {
      background: rgba(25, 118, 210, 0.1);
      border: 1px solid rgba(25, 118, 210, 0.3);
      color: #1976d2;
      font-size: 0.75rem;
      height: 28px;

      .filter-chip-content {
        display: flex;
        align-items: center;

        .filter-chip-label {
          font-size: inherit;
          color: inherit;
        }

        .filter-chip-value {
          font-size: inherit;
          font-weight: 700;
          margin-left: 4px;
          color: inherit;
        }
      }

      .MuiChip-deleteIcon {
        color: rgba(25, 118, 210, 0.7);
        font-size: 16px;

        &:hover {
          color: #1976d2;
        }
      }
    }

    .clear-all-button {
      background: rgba(244, 67, 54, 0.1);
      border: 1px solid rgba(244, 67, 54, 0.3);
      color: #f44336;
      font-size: 0.75rem;
      height: 28px;
      padding: 4px 8px;

      &:hover {
        background: rgba(244, 67, 54, 0.2);
      }
    }
  }
}
