.scrolling-container {
  --fade-width: calc(var(--d-margin) / 2);

  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent 100%);
  overflow-x: auto;
  display: flex;

  & > * {
    flex: 1 0 auto;
  }
}

.control-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-unit);

  &.nowrap {
    flex-wrap: nowrap;
  }

  &.vertical {
    flex-direction: column;
  }

  & .left-auto {
    margin-left: auto;
  }
}

::placeholder {
  color: var(--c-accent);
  opacity: 0.15;
}

.button,
.text-input,
.radio-label,
.styled-select {
  padding: 0 12px;
  height: 34px;
  color: var(--c-light);
  background: rgba(var(--c-accent-rgb), 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 12px;
  border-radius: 8px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: var(--transition-s);

  .no-touch &:is(.button, .radio-label):hover,
  .no-touch &:is(.styled-select):hover {
    background: rgba(var(--c-accent-rgb), 0.2);
  }
}

.button {
  &.quiet {
    color: rgba(var(--c-light-rgb), 0.6);

    .no-touch &:hover {
      color: var(--c-light);
    }
  }

  &.primary,
  &.active {
    background: rgba(var(--c-accent-rgb), 0.6);
    color: var(--c-light);

    .no-touch &:hover {
      background: rgba(var(--c-accent-rgb), 0.7);
    }
  }
}

.text-input {
  font-size: 16px; /* prevent iOS focus zoom */
}

input[type='radio'] {
  display: none;

  &:checked + .radio-label {
    background: rgba(var(--c-light-rgb), 0.9);
    color: var(--c-dark);

    .no-touch &:hover {
      background: var(--c-light);
    }
  }
}

.styled-select {
  position: relative;
  display: flex;
  min-width: 0; /* allow truncation of long label values */

  & label {
    display: flex;
    min-width: 0; /* also required to allow truncation of long label values */
    flex: 1; /* grow to fill when label values are short */

    & .faux-label {
      flex: 0;
      padding: 3px 10px 3px 0;
      margin: -3px 10px -3px 0;
      border-right: 1px solid rgba(var(--c-light-rgb), 0.2);
    }

    & .value {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & .arrow {
      margin-left: auto;
      padding-left: 0.4em;
      flex: 0;
    }
  }

  &.primary {
    background: rgba(var(--c-light-rgb), 0.9);
    color: var(--c-dark);

    .no-touch &:hover {
      background: var(--c-light);
    }
  }

  & select {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}