@import font-awesome
$alert-color: #f04124
$checked-color: #43AC6A
$unchecked-color: #999
.optional-input-activator-container
  display: inline-block
  .optional-input-activator-toggle
    margin-right: 7px
  &.active
    .optional-input-activator-toggle
      color: #3636BD
      @extend .fa, .fa-2x, .fa-toggle-on
    &.error
      color: $alert-color
      .optional-input-activator-toggle
        color: $alert-color
  &.inactive
    color: #999
    .optional-input-activator-toggle
      @extend .fa, .fa-2x, .fa-toggle-off
.optional-attribute-container
  .optional-boolean-label
    display: inline-block
    margin-right: 8px
  &.inactive
    display: none
  &.optional-boolean
    &.active
      .optional-boolean-activator-toggle
        color: #3636BD
        @extend .fa, .fa-2x, .fa-toggle-on
      .optional-boolean-toggle
        &.active
          color: $checked-color
          @extend .fa, .fa-2x, .fa-check-square-o
        &.inactive
          color: $unchecked-color
          @extend .fa, .fa-2x, .fa-square-o
      &.disabled
        .optional-boolean-toggle
          &.active
            color: $unchecked-color
          &.inactive
            color: $unchecked-color
    &.inactive
      display: block
      .optional-boolean-activator-toggle
        color: $unchecked-color
        @extend .fa, .fa-2x, .fa-toggle-off
      .optional-boolean-label
        color: $unchecked-color
      .optional-boolean-toggle
        display: none
  &:not(.disabled)
    .optional-boolean-toggle
      cursor: pointer
  .optional-attribute-hint
    @extend .fa, .fa-2x, .fa-info-circle
    margin-left: 10px
    color: #888
    cursor: pointer
    position: relative
    &::after
      content: attr(data-hint)
      font-size: 10px
      position: absolute
      z-index: 999
      white-space: nowrap
      bottom: 9999px
      left: 80%
      background-color: #000
      color: #e0e0e0
      padding: 0px 7px
      line-height: 24px
      height: 24px
      opacity: 0
      transition: opacity 0.4s ease-out
    &:hover
      color: #3636BD
      &::after
        opacity: 1
        bottom: 0