.settings-card {
  &:before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 24px;
    background: linear-gradient(118deg, var(--epink) 35.6%, rgba(166, 7, 222, 0) 54.02%);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
  }

  select {
    background-image: var(--select-bottom-arrow);
    background-size: 11px 7px;
    background-position: right 22px center;
    padding: 12px 22px;
  }
}

svg.playing {
  fill: #BAAAFF;
}

@media screen and (min-width: 768px) {
  .settings-card {
    select {
      background-position: right 24px center;
      padding: 18px 24px 18px 32px;
    }

    &::before {
      background: linear-gradient(140deg, var(--epink) 35.6%, rgba(166, 7, 222, 0) 54.02%);
    }
  }
}