/**
 * 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#control-handle-tabs div.oxy-tab {
  align-items: center;
  flex-grow: 1;
  font-weight: 600;
  border-top: 8px solid #00000020 !important;
}

div#control-handle-tabs div.oxy-tab:not(.tab-active) {
  background-color: var(--color-primary) !important;
  color : var(--color-surface);
}

div#control-handle-tabs div.oxy-tab.tab-active {
  background-color: var(--color-surface);
  color : var(--color-primary) ;
}
div#control-handle-tabs div.oxy-tab-content {
  width: 100%;
  padding: 0;
  padding-top: 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
div#control-handle-tabs div.oxy-tab-content div.model-compatible-motors-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

div#control-handle-tabs div.oxy-tab-content img.model-image{
  max-width: 600px;
  width: 100%;
}