:host {
  box-sizing: border-box;
  display: block;
  padding: 8px;
  user-select: none;
}

.rdio-button-mini {
  &:nth-last-child(2) {
    margin-left: auto;
  }

  &.all-off {
    background: rgb(100, 50, 50);
  }

  &.all-on {
    background: rgb(50, 100, 50);
  }
}

.fieldset {
  border-color: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 4px;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  legend.small {
    letter-spacing: 0.1em;
  }

  > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
}

.rdio-button {
  width: calc(25% - 4px);
}

.rdio-button-mini {
  width: calc(12.5% - 4px);
}

@media (min-width: 720px) {
  .rdio-button {
    width: calc(20% - 4px);
  }

  .rdio-button-mini {
    width: calc(10% - 4px);
  }
}

@media (min-width: 1200px) {
  .rdio-button {
    width: calc(10% - 4px);
  }

  .rdio-button-mini {
    width: calc(5% - 4px);
  }
}
