$checkbox-size: 20px;
$checkbox-touch-size: 20px;
$checkbox-color: #EBEBEB;
$checkbox-color-dark: palette(grey, medium);
.re-checkbox {
    width: auto;
    margin: 16px 8px 16px 0;
    display: inline-flex;
    position: relative;
    border-radius: 1px;
    &.disabled {
        opacity: 0.6;
    }
    &:not(.disabled) {
        cursor: pointer;
        .checkbox-label {
            cursor: pointer;
        }
    }
    &.--custom {
        display: block;
        @extend %clearfix;
        margin-right: 0;
        input {
            display: none;
            &:checked+label {
                &:after {
                    opacity: 1;
                    transform: scale3D(1, 1, 1);
                    transition: $swift-ease-out;
                }
            }
        }
        label {
            position: relative;
            display: block;
            margin-left: 25px;
            &:before {
                top: 2px;
                border-radius: 1px;
                border: 1px solid palette(grey, dark);
                transition: $swift-ease-out;
                width: 15px;
                height: 15px;
                position: absolute;
                left: -25px;
                transition: $swift-ease-in;
                content: " ";
            }
            &:after {
                opacity: 0;
                width: 11px;
                height: 11px;
                background: palette(grey, dark);
                position: absolute;
                left: -23px;
                top: 4px;
                transform: scale3D(.15, .15, 1);
                transition: $swift-ease-in;
                content: "";
            }
        }
    }
    .checkbox-container {
        width: $checkbox-size;
        min-width: $checkbox-size;
        height: $checkbox-size;
        position: relative;
        border-radius: 1px;
        border: 1px solid $checkbox-color;
        background: palette(white);
        transition: $swift-ease-out;
        &:focus {
            outline: none;
        }
        &:after {
            border-radius: 1px;
            opacity: 0;
            width: 16px;
            height: 16px;
            background: $checkbox-color;
            position: absolute;
            left: 1px;
            top: 1px;
            transform: scale3D(.15, .15, 1);
            transition: $swift-ease-in;
            content: "";
        }
        input {
            position: absolute;
            left: -999em;
        }
    }
    .checkbox-label {
        height: $checkbox-size;
        line-height: $checkbox-size;
        margin-right: auto
    }
    &--dark {
      &.checked {
        .checkbox-label {
          color: palette(purple)
        }
      }
      .checkbox-container {
        border: 1px solid $checkbox-color-dark;
        &:after {
          background: $checkbox-color-dark
        }
      }
    }
}

.checkbox-label {
    .dropdown--filter & {
        height: auto;
        padding-right: 2em;
        white-space: nowrap;
        text-transform: none
    }
}

.re-checkbox.checked {
    .checkbox-container {
        &:after {
            opacity: 1;
            transform: scale3D(1, 1, 1);
            transition: $swift-ease-out;
        }
    }
}
