@keyframes checkbox-ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}


form {
    &.first-child-adjust {
        margin-top: -12px;
    }
}

.form-radio, .form-group {
    position: relative;
}

.help-block {
    color: rgba(0,0,0,0.54);
    font-size: 12px;
    line-height: 12px;
    padding-top: 8px;

    .checkbox &, .form-radio &, .form-group & {
        width: 100%;
    }

    .checkbox & {
        margin-bottom: 16px;
        position: relative;
    }

    .form-radio & {
        margin-top: -16px;
        padding-top: 4px;
    }
}

.form-group {
    input {
        height: 16px;
        line-height: 16px;
    }

    textarea {
        resize: none;
    }

    .control-label {
        color: rgba(0,0,0,0.54);
        font-size: 16px;
        font-weight: normal;
        line-height: 16px;
        padding: 0;
        pointer-events: none;
        position: absolute;
        top: 8px;
        transition: all .28s ease;
        z-index: 1;

        &::after {
            content: '';
            font-size: 16px;
            line-height: 16px;
            transition: all .28s ease;
        }
    }

    .bar {
        border-bottom: 1px solid rgba(0,0,0,0.42);
        display: block;
        position: relative;

        &::before {
            background: $form-focus-color;
            bottom: (-1px);
            content: '';
            height: (2px);
            left: 50%;
            position: absolute;
            transition: left $form-transition-speed ease,
                        width $form-transition-speed ease;
            width: 0;
            z-index: 2;
        }
    }

    input, textarea {
        background: none;
        border-color: transparent;
        border-width: 0;
        box-shadow: none;
        color: rgba(0,0,0,0.87);
        display: block;
        font-size: 16px;
        margin: 28px 0 0;
        padding: 8px 0 8px 1px;
        transition: all $form-transition-speed ease;
        width: 100%;

        &::placeholder {
          color: transparent;
          visibility: hidden;
        }

        &:hover {
            ~ .bar {
              border-color: rgba(0,0,0,0.87);
            }
        }

        &:required {
            ~ .control-label {
                &::after {
                    content: '\00a0*';
                }
            }
        }

        &:focus,
        &:not(:placeholder-shown),
        &.form-file,
        &.has-value {
            color: rgba(0,0,0,0.87);

            ~ .control-label {
                color: rgba(0,0,0,0.54);
                font-size: 12px;
                left: 0;
                top: -14px;

                &::after {
                    font-size: 12px;
                }
            }
        }

        &:focus {
            outline: none;

            &::placeholder {
                color: rgba(0,0,0,0.42);
                visibility: visible;
            }

            ~ .control-label {
                color: transparentize($form-focus-color, 0.13);

                &::after {
                    color: $form-error-color;
                }
            }

            ~ .bar {
                &::before {
                    left: 0;
                    width: 100%;
                }
            }
        }

        &:disabled,
        &:read-only {
            color: rgba(0,0,0,0.38);

            ~ .control-label {
                color: rgba(0,0,0,0.38);
            }

            ~ .bar {
                border-bottom-style: dashed;
                &::before {
                    display: none;
                    visibility: hidden;
                }
            }
        }
    }

    input[type="file"] {
        line-height: 1;

        ~ .bar {
            display: none;
        }
    }

    select, input, textarea {
        &:focus {
            outline: none;
        }
    }
}

// Radio & Checkbox
.checkbox, .form-radio {
    label {
        color: rgba(0,0,0,0.87);
        cursor: pointer;
        display: block;
        line-height: 16px;
        padding-left: 30px;
        padding-right: 24px;
        position: relative;
        text-align: left;
    }

    input {
        left: 0;
        opacity: 0.00000001;
        position: absolute;
        width: auto;
    }
}

.checkbox {
    display: inline-flex;
    padding: 44px 0 8px;

    .ripple {
        // background: $form-focus-color;
        background: rgba(0,0,0,0.4);
        border-radius: 24px;
        height: 42px;
        left: -13px;
        position: absolute;
        top: -13px;
        transform: scale(0);
        transition: opacity 450ms cubic-bezier(0, 0, 0.2, 1),
                    transform 0s 450ms;
        width: 42px;
        will-change: opacity, transform;
        z-index: 33;
    }

    .helper {
        border: 2px solid currentColor;
        border-radius: 1px;
        box-sizing: border-box;
        color: rgba(0,0,0,0.54);
        height: 16px;
        left: 0;
        position: absolute;
        top: 0;
        transition: border-color #{$form-transition-speed * 0.75} ease;
        width: 16px;
        z-index: 44;

        &::before, &::after {
            background-color: $form-focus-color;
            border-radius: 4px;
            content: '';
            display: block;
            height: 0;
            opacity: 0;
            position: absolute;
            transform-origin: left top;
            transition: opacity #{$form-transition-speed * 0.75} ease,
                      	height 0s linear #{$form-transition-speed * 0.75};
            width: calc(16px / 5);
        }

        &::before {
            box-shadow: 0 0 0 1px #FFFFFF;
            left: calc(16px * 0.38);
            top: calc(16px * 0.65);
            transform: rotate(-135deg);
        }

        &::after {
            left: 0;
            top: calc(16px * 0.3);
            transform: rotate(-45deg);
        }
    }

    label:hover .helper {
        color: $form-focus-color;
    }

    &:not(.has-js) {
        input:focus {
            ~ .ripple {
                animation: checkbox-ripple 600ms cubic-bezier(0,0,.2,1);
                transition: all 0s;
            }
        }
    }

    &.has-js {
        input.focused {
            ~ .ripple {
                opacity: 0.3;
                transform: scale(1);
                transition: all 250ms cubic-bezier(0,0,.2,1);
            }
        }

        input.clicked {
            ~ .ripple {
                animation: checkbox-ripple 600ms cubic-bezier(0,0,.2,1);
                transition: all 0s;
            }
        }
    }



    input:checked {
        ~ .ripple {
          background: $form-focus-color;
        }

        ~ .helper {
            color: $form-focus-color;

            &::after, &::before {
                opacity: 1;
                transition: height #{$form-transition-speed * 0.5} ease;
            }

            &::after {
                height: 8px;
            }

            &::before {
                height: calc(16px * 1.2);
                transition-delay: #{$form-transition-speed * 0.5};
            }
        }
    }
}

.has-error {
    .legend.legend, &.form-group .control-label.control-label {
        // Prevent !importantRule
        color: $form-error-color;
    }

    &.form-group, &.checkbox, &.radio, &.form-radio {
        .help-block, .helper {
            color: $form-error-color;
        }
    }

    .bar {
        &::before {
            background: $form-error-color;
            left: 0;
            width: 100%;
        }
    }
}


.edit-actions {
    background: #FFFFFF;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    z-index: 100;

    @include z-depth(4);

    .wrap {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        margin: 0 32px;

        .left-buttons,
        .right-buttons {
            display: inline-flex;
        }

        .right-buttons {
            flex-direction: row-reverse;
        }
    }
}
