.controlGroup {
  display: flex;
  gap: 1rem;
  width: 70%;

  @media(min-width: 800px) {
    width: unset;
  }

  .progressBar {
    input {
      width: 100%;
    }

    width: 100%;
  }

  .buttons {
    display: flex;

    @media(max-width: 800px) {
      flex-direction: column;
    }

  }


  flex-direction: column;

  button {
    @media(min-width: 800px) {
      all: unset;
      position: relative;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      color: transparent;
      height: 40px;
      padding: 10px 8px;
      font-size: 2rem;
      background: #5a544c;
      border: 12px solid #383633;
      border-top-width: 6px;
      text-shadow: 1px 0px rgba(255, 255, 255, 0.473),
        -1px -1px #444;

      &>* {
        pointer-events: none;
      }

      &:not(:last-of-type) {
        border-right-width: 6px;
      }

      &:not(:first-of-type) {
        border-left-width: 6px
      }

      &:first-of-type {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      &:last-of-type {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      &[data-selected="true"],
      &:active {
        border-width: 4px;
        margin-top: 10px;
        padding-inline: 10px;

        &:last-of-type {
          border-right-width: 4px;
          padding-left: 12px;
          padding-right: 14px;
        }

        &:first-of-type {
          border-left-width: 4px;
          padding-right: 12px;
          padding-left: 14px;
        }
      }
    }

    @media(max-width: 800px) {
      all: unset;
      position: relative;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      color: transparent;
      height: 40px;
      padding: 10px 8px;
      font-size: 2rem;
      background: #5a544c;
      border: 12px solid #383633;
      border-top-width: 6px;
      text-shadow: 1px 0px rgba(255, 255, 255, 0.473),
        -1px -1px #444;

      &>* {
        pointer-events: none;
      }

      &:first-of-type {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      &:last-of-type {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      &[data-selected="true"],
      &:active {
        color: rgb(227, 227, 227);
        margin-top: 0px;
        padding-block: 4px;
        padding-top: 10px;

        &:last-of-type {
          padding-top: 12px;
        }
      }

    }
  }
}


/* --- Slider --- */

.progressBar {
  --slider-color: rgb(118, 118, 118);
  touch-action: none;
  z-index: 10;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  position: relative;
}

input[type="range"]::-webkit-slider-runnable-track {
  /* background: var(--slider-color); */
  height: 28px;
  border-radius: 2px;
  border: none;
}

input[type="range"]::-moz-range-track {
  /* background: var(--slider-color); */
  height: 28px;
  border-radius: 2px;
  border: none;
}

input[type="range"]::after {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: var(--slider-color);
  height: 6px;
  width: 100%;
  border: 10px solid blue;
  border-radius: 2px;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 28px;
  background: var(--slider-color);
  border-radius: 2px;
  border: none;
  margin-top: 0px;
  box-shadow: 0 0 2px 0 black;
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 28px;
  background: var(--slider-color);
  border-radius: 2px;
  border: none;
  box-shadow: 0 0 2px 0 black;
}

/* --- */