sound.scss

.sound-to-choose {
  margin: 5px 25px;
  margin-right: 0.5em;
}

.btn-sound-add.btn-toggle {
  border: 1px solid $color-navy;
  color: $color-navy;
  background-color: $color-white;
  padding: 2px 7px 4px 7px;
  width: 140px;
  font-size: 14px;
  &.on {
    background-color: $color-navy;
    color: $color-white;
  }
}

.btn-sound-container {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
  padding: 0 20px;
}

.sound-type-container {
  border-top: 1px solid $color-navy;
}

.btn-sound-item {
  &:first-child {
    float: left;
  }
  &:last-child {
    float: right;
  }
  svg.btn-sound-type {
    &.nature, &.urban, &.abstract {
      &:hover {
        path {
          fill: $color-navy;
        }
      }

    }
    &.nature.expanded, &.urban.expanded, &.abstract.expanded {
      path {
        fill: $color-navy;
      }
    }
  }
}

.volume-range {
  width: 90%;
  margin-left: 10px;
  height: 50px;
}

.sound-container {
  display: none;
  &.show {
    display: inline-block;
  }
}

.sound-list {
  background-color: $color-white;
  padding: 20px 5px 10px 5px;
  text-align: center;
  &.show {
    display: inline-block;
  }
}

.now-playing-container {
  display: inline;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  ul {
    max-width: 320px;
  }
  .soundtype-container {
    display: inline-table;
  }
}

audio {
  display: none;
}