div {
  .filters {
    padding: var(--scale-800) 0px;
    display: flex;
    flex-direction: row;
    gap: 0px var(--scale-400);
    label {
      cursor: pointer;
      flex-grow: 1;
      display: flex;
      padding: var(--scale-300) var(--scale-400);
      align-items: center;
      gap: var(--scale-200);
      background-color: var(--color-surface-primary);
      border-radius: var(--border-radius-md);
      border: var(--border-width-sm, 1px) solid var(--color-border-primary);
      // icon
      svg {
        display: flex;
        height: 25px;
        width: 25px;
      }
      select {
        cursor: pointer;
        border: none;
        flex-grow: 1;
        background-color: var(--color-surface-primary);
        font-family: var(--font-family-body);
        font-size: var(--typography-size-body-sm);
        font-style: normal;
        font-weight: var(--font-weight-medium);
        line-height: 20px; // 20px not in our line-height vars
        &:focus-visible {
          outline: 0px solid transparent;
        }
        option {
          font-family: var(--font-family-body), sans-serif;
        }
      }
    }
    label:focus-visible,
    label:has(select:focus-visible) {
      outline: var(--border-width-sm) solid var(--color-border-focus);
      outline-offset: 1px;
    }
  }
}

[slot="content"] {
  height: 100%;
  display: flex;
  flex-direction: column;

  tems-mediatrendexplorer-content {
    flex-grow: 1;
  }
}