@import '../../../styles/core.scss';

.LabeledCheckbox {
  $bgc: rgba(get(grays, -2), .075);

  & {
    display: flex;
    align-items: center;
    padding: ms(-3);
    border: 1px dotted transparent;
    border-radius: 5px;
    -webkit-user-select: none;
    transition: .25s ease;
    &:hover {
      background: $bgc;
    }
    &:focus-within:not(:hover) {
      border: 1px dotted rgba(#000, .2);
    }
  }

  &_selectable {
    -webkit-user-select: initial;
  }

  > * + * {
    margin-left: .6em;
  }

  &_text {
    overflow: hidden;
    input {
      transition: inherit;
      background: $bgc;
      margin: #{-1 * ms(-3)};
      margin-left: ms(-3);
      padding: ms(-3);
      border-width: 0 0 0 1px !important;
      &:focus {
        border-radius: 0;
      }
    }
    &:hover {
      border: 1px solid rgba(#000, .1);
    }
    &:focus-within {
      background: get(color 'blue');
      color: white;
      &, &:not(:hover) {
        border: 1px solid get(color 'blue');
      }
    }
    &:hover input {
      background: #fff;
      border-radius: 0;
      &:not(:focus) {
        border-color: rgba(#000, .1);
      }
    }
  }
}