/**
 * All of the CSS for the public-facing CSS source
 * for the MODEC motor control handle accessory's specs.
 */

:root {
  --color-motor: var(--color-primary);
}

div.oxy-tab.power-range-05 { --color-motor: var(--color-power-range-05); }
div.oxy-tab.power-range-07 { --color-motor: var(--color-power-range-07); }
div.oxy-tab.power-range-08 { --color-motor: var(--color-power-range-08); }
div.oxy-tab.power-range-10 { --color-motor: var(--color-power-range-10); }
div.oxy-tab.power-range-20 { --color-motor: var(--color-power-range-20); }
div.oxy-tab.power-range-25 { --color-motor: var(--color-power-range-25); }
div.oxy-tab.power-range-30 { --color-motor: var(--color-power-range-30); }

div#motor-options-tabs div.oxy-tab {
  align-items: center;
  flex-grow: 1;
  font-weight: 600;
  border-top: 8px solid var(--color-motor);
  padding: 10px;
}

@media only screen and (max-width: 768px)  {
  div#motor-options-tabs div.oxy-tab {
    font-size: .9em;
  }
}


div#motor-options-tabs div.oxy-tab:not(.tab-active) {
  background-color: var(--color-primary);
  color : var(--color-surface);
}

div#motor-options-tabs div.oxy-tab.tab-active {
  background-color: var(--color-surface);
  color : var(--color-primary);
}
div#motor-options-tabs div.oxy-tab-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
div#motor-options-tabs div.oxy-tab-content div.model-compatible-motors-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

div#motor-options-tabs div.oxy-tab-content img.model-image, div#motor-options-tabs div.oxy-tab-content img.inox-motor {
  max-width: 400px;
  width: 100%;
}

.motor-option-sub-title {
  color: var(--color-primary)
}