@import "$homeDir/site/shared/resources.scss";

.mc-radio-button-component-wrapper {
  width: 100%;
  max-width: 360px;
}

.input-label {
  display: block;
  color: $color-label-title;
  padding: 5px;
}

.mc-radio-button__options-wrapper {
  overflow: hidden;
  display: flex;
  max-width: 100%;
  text-align: center;
  border: 1px solid $color-border-light;
  border-radius: 5px;
}

.mc-radio-button__option {
  flex: 1 1 0;
}
// inbetween border
.mc-radio-button__option + .mc-radio-button__option {
  border-left: 1px solid $color-border-light;
}
.mc-radio-button__option + .mc-radio-button__option--selected {
  border-left-color: $color-main;
}
.mc-radio-button__option--selected + .mc-radio-button__option {
  border-left-color: $color-main;
}
// selected style
.mc-radio-button__option--selected {
  color: $color-text-light;
  background: $color-main;
}

.mc-radio-button__option-label {
  display: block;
  padding: $padding / 2;
  cursor: pointer;
  user-select: none;
}

.mc-radio-button__option-input {
  display: none;
}