.volume-group {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;

  .speaker {
    background: transparent;
    padding: 1rem;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip-path: polygon(
          50% 0,
          100% 25%,
          100% 75%,
          50% 100%,
          0 75%,
          0 25%,
          50% 0,
          50% 1px,
          1px calc(25% + .5px),
          1px calc(75% - .5px),
          50% calc(100% - 1px),
          calc(100% - 1px) calc(75% - .5px),
          calc(100% - 1px) calc(25% + .5px),
          50% 1px
      );
      background-color: #ff7723;
    }
  }

  .volume-control {
    padding: .63rem;
    border-top: solid .06rem  #ff7723;
    border-bottom: solid .06rem  #ff7723;
    background-color: transparent;
    border-left: none;
    border-right: none;

    svg {
      cursor: pointer;
      width: 1.5rem;
      height: 1.5rem;
    }

  }

  .volume-slider {
    border: .06rem solid #eed3c2;
    height: .75rem;
    width: 39rem;
    position: relative;

    input[type="range"] {
      position: relative;
      -webkit-appearance: none;
      -moz-appearance: none;
      display: block;
      outline: none;
      height: 4px;
      width: 38.5rem;
      appearance: none;
      background-color: transparent;
      margin: .25rem;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #ff7723
;
        border: .06rem solid #ff7723;
        height: .88rem;
        width: .88rem;
        padding: 2px;
        background-clip: content-box;
        transition: transform .2s ease;

        &:focus {
          cursor: pointer;
          border: .12rem solid #ff7723;
          transform: scale(1.2);
        }

        &:hover {
          cursor: pointer;
          border: .12rem solid #ff7723;
          transform: scale(1.2);
        }
      }

      &::-moz-range-thumb {
        border-radius: 0;
        background: #ff7723;
        border: .06rem solid #ff7723;
        height: .5rem;
        width: .5rem ;
        padding: 3px;
        background-clip: content-box;
        &:focus {
          cursor: pointer;
          border: .14rem solid #ff7723;
          transform: scale(1);
        }

        &:hover {
          cursor: pointer;
          border: .14rem solid #ff7723;
          transform: scale(1);
        }
      }

      &::-ms-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #ff7723;
        border: .06rem solid #ff7723;
        height: .88rem;
        width: .88rem;
        padding: 3px;
        background-clip: content-box;
        &:focus {
          cursor: pointer;
          border: .12rem solid #ff7723;
          transform: scale(1.2);
        }

        &:hover {
          cursor: pointer;
          border: .12rem solid #ff7723;
          transform: scale(1.2);
        }
      }
    }
  }
}
svg{
  color: #ff7723;
}
