export const checkbox = styled.css `
  .sk-checkbox {
    width: $spacing-big;
    height: $spacing-big;
    display: inline-flex;
    &:hover {
      cursor: pointer;
    }
    &.right {
      order: 10;
    }
  }
`
export const StyledLabel = styled.label `
  display: flex;
  align-items: center;
  margin: $spacing 0 0 0;

  &:first-child,
  &:first-of-type,
  &:first-child & {
    margin-top: 0;
  }
  &:hover {
    cursor: pointer;
  }

  ${props =>
    props.isCheckbox &&
    styled.css `
      padding: $spacing-small 0;

      justify-content: left;
      text-align: left;

      input {
        border: 0;
        clip: rect(0 0 0 0);
        height: rem(1);
        width: rem(1);
        margin: rem(-1);
        overflow: hidden;
        padding: 0;
        position: absolute;
      }
    `}

  ${props =>
    props.isRadio &&
    styled.css `
      padding: rem(10) 0;

      input {
        -webkit-appearance: none;
        -moz-appearance: none;
      }
    `}

  ${checkbox}

  .label-text-count {
    opacity: .9;
  }

  .sk-radio {
    width: $spacing-big;
    height: $spacing-big;
    margin: $spacing-small;
    display: inline-flex;
    &:hover {
      cursor: pointer;
    }
  }
  .sk-check {
    cursor: pointer;
    width: $spacing-big;
    height: $spacing-big;
    display: inline-block;
  }
`