@import '../shared/formfields.module.scss';

.toggle-field {
  @extend %form-field;

  position: relative;
  padding: ru(.5) ru(.5) ru(.75);

  &.no-label {
    padding: ru(.5);
  }

  &.no-border {
    border: 0;
    padding: ru(.5) 0;
  }
}

.header {
  @include typography-a-8-bold;
  margin-bottom: ru(.5);
}

.tooltip-wrapper {
  float: right;
  margin-left: 1.5rem;
}

.tooltip {
  margin-left: auto;
}

.tooltip-icon {
  @extend %tooltip-icon;
}

.body {
  @include typography-7(false);
  @include typography-semibold;

  position: relative;
  line-height: ru(.75);
  margin-bottom: ru(.5);

  ul {
    padding-left: ru(.75);
  }
}

.button-wrapper {
  display: flex;
  flex-direction: column;
  > .toggle-selected {
    display: none;
  }
}

.button {
  position: relative;
  flex-grow: 50%;
  margin-bottom: ru(.25);
}

.side-by-side {
  display: flex;
  flex-direction: row;

  .button {
    margin-left: ru(.75);
    margin-bottom: 0;

    &:first-of-type {
      margin-left: 0;
    }
  }
}

/* --  state:focus  -- */
.focused {
  @extend %focused;
}

@media #{$medium-up} {
  .button-wrapper {
    flex-direction: row;
  }

  .button {
    margin-left: ru(1);
    margin-bottom: 0;

    &:first-of-type {
      margin-left: 0;
    }
  }
}

/* --  state:error  -- */
.hasError {
  @extend %hasError;
}