:host(us-filter) {
  .filter-wrapper {
    background-color: inherit;
    width: inherit;
    position: relative;
    padding: 0 var(--space-inner-xl);

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: calc(var(--space-inner-xl) - var(--space-inline-xs)) 0;
      border-bottom: 1px solid var(--color-neutral-300);

      &__left {
        display: flex;
        align-items: center;

        .checkbox {
          margin-right: var(--space-inline-m);
        }

        .title {
          color: var(--color-text-1000);
          font: var(--text-label-m);
        }

        .filter-header-info {
          display: flex;
          margin-left: var(--space-inner-m);
        }
      }

      &__right {
        button {
          font: var(--text-link-m);
          color: var(--color-primary-800);
          text-decoration: underline;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .filter-content {
      width: 100%;
      padding: var(--space-inner-xl) 0;
    }
  }
}