.noora-filter {
  display: flex;
  align-items: center;
  box-shadow: var(--noora-border-light-default);
  border-radius: var(--noora-radius-3);
  background: var(--noora-surface-background-primary);
  padding: var(--noora-spacing-1) var(--noora-spacing-3);

  & > :not(:first-child) {
    margin-left: var(--noora-spacing-3);
  }

  & > :not(:last-child) {
    border-right: 1px solid;
    border-color: var(--noora-surface-border-primary);
    padding-right: var(--noora-spacing-3);
  }

  & [data-part="label"] {
    display: flex;
    color: var(--noora-surface-label-primary);
    font: var(--noora-font-weight-medium) var(--noora-font-body-small);
  }

  & [data-part="placeholder"] {
    display: flex;
    color: var(--noora-surface-label-secondary);
    font: var(--noora-font-weight-medium) var(--noora-font-body-small);
  }

  & > [data-part="dropdown"],
  & > [data-part="popover"] {
    display: flex;
    align-items: center;

    & [data-part="trigger"] {
      display: flex;
      align-items: center;
      gap: var(--noora-spacing-1);
      cursor: pointer;
      border-radius: var(--noora-radius-2);

      &:hover {
        background: var(--noora-surface-background-tertiary);

        & [data-part="badge"] {
          background: color-mix(
            in oklch,
            var(--noora-badge-light-fill-neutral-background) 50%,
            transparent
          );
        }
      }
    }

    & [data-part="badge"] {
      display: flex;
      align-items: center;
      border-radius: var(--noora-radius-2);
      background: var(--noora-badge-light-fill-neutral-background);
      padding: var(--noora-spacing-1) var(--noora-spacing-4);
      font: var(--noora-font-body-small);
    }

    & [data-part="indicator"] {
      display: inline-flex;
      color: var(--noora-surface-label-secondary);

      & > div {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: var(--noora-icon-size-medium);
        height: var(--noora-icon-size-medium);

        & svg {
          width: 100%;
          height: 100%;
        }
      }

      &:not([data-state="open"]) [data-part="indicator-up"] {
        display: none;
      }

      &[data-state="open"] [data-part="indicator-down"] {
        display: none;
      }
    }
  }

  & > [data-part="popover"] {
    & [data-part="content"] {
      display: none;
      flex-direction: column;
      gap: var(--noora-spacing-3);
      z-index: var(--noora-z-index-10);
      box-shadow: var(--noora-border-medium);
      border-radius: var(--noora-radius-4);
      background: var(--noora-surface-background-primary);
      padding: var(--noora-spacing-5);
      width: 300px;

      & > span {
        color: var(--noora-surface-label-primary);
        font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
      }

      & [data-part="actions"] {
        display: flex;
        justify-content: flex-end;
        gap: var(--noora-spacing-6);
        margin-top: var(--noora-spacing-8);
      }

      &[data-state="open"] {
        display: flex;
      }
    }
  }

  & [data-part="delete-icon"] {
    display: flex;
    cursor: pointer;
    box-sizing: border-box;
    outline: 0;
    border: 0;
    border-radius: var(--noora-radius-2);
    background: transparent;
    padding: 0;
    width: var(--noora-icon-size-medium);
    height: var(--noora-icon-size-medium);
    color: var(--noora-surface-label-secondary);

    &:hover {
      background: var(--noora-surface-background-tertiary);
    }

    & svg {
      width: 100%;
      height: 100%;
    }
  }
}