/*
 * - This can probably be achieved with flexbox so that we don't use any
 * margins or paddings
 * - We shouldn't use #FFFFFF but a variation of it to have less contrast
 */

~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";

:root {
   --background-confirmed: ~colors.confirmation;
   --border-confirmed: ~boxes.border.confirmed;
   --border-unchecked: ~boxes.border.unchecked;
   --border-radius: remCalc(~boxes.borderRadius);
   --bottom-shaddow: ~boxes.bottomShaddow;
}

.toggle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #464646;
  border-radius: var(--border-radius);
  width: 5rem;
  height: 2.5rem;

  & .btn,
  & .label {
    height: 2.188rem;
    width: 2.188rem;
    margin: 0.125rem;
  }

  & .label {
    padding-top: 4px;
    text-align: center;
  }

  & .btn {
    background: #FFFFFF;
    box-shadow: var(--bottom-shaddow);
    border-radius: var(--border-radius);
  }

  &.on {
    background: var(--background-confirmed);
    border: var(--border-confirmed);

    & .label {
      float: right;
      color: #FFFFFF;
    }

    & .btn {
      float: left;
    }
  }

  &.off {
    background: #E6E6E6;
    border: var(--border-unchecked);

    & .label {
      float: left;
    }

    & .btn {
      float: right;
    }
  }
}