@use '@vizality' as vz;

.vz-sticky-element {
  display: flex;
  padding: 12px;
  justify-content: space-between;
  align-items: center;
  &-wrapper {
    @include vz.size(100%);
    position: sticky;
    top: -1px;
    border-radius: 8px;
    background: var(--background-secondary-alt);
    z-index: 1;
    box-shadow: var(--elevation-low);
    flex: 0;
    &[vz-stuck] {
      background: var(--background-primary);
      border-radius: 0;
      .vz-sticky-element {
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
  }
  .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {
    background: var(--brand-experiment);
    &:hover {
      background: var(--brand-experiment);
    }
  }
}
