_forms.scss

.login {
    width: 50%;
    margin: 50px auto;
    padding: 50px;
    text-align: center;
    & form {
        @include clearfix();
        box-shadow: 0 0 30px rgba(0, 0, 0, .1);
        padding: 40px 100px;
        border-radius: 5px;
        >h1 {
            margin-bottom: 30px;
        }
    }
    &__title {
        font-size: 4em;
        color: $color-text;
    }
    &__label {
        font-size: 1.4em;
        display: block;
        text-align: left;
        font-weight: bold;
        color: $color-text;
        margin: 10px 0;
    }
    &__input {
        display: block;
        width: 100%;
        border: 1px solid $color-purple;
        padding: 15px;
        border-radius: 5px;
        font-weight: bold;
        color: $color-text;
        margin: 15px 0;
    }
    &__button {
        &--form {
            @extend .btn;
            background: linear-gradient(65deg, $color-purple 0, lighten($color-purple, 30) 100%);
            cursor: pointer;
            font-family: proxima-nova, sans-serif;
            width: 100%;
            padding: 15px;
            position: relative;
            box-shadow: 0 8px 16px rgba(81, 18, 130, .4);
            transition: all .2s linear;
            &:after {
                font-family: 'lineicons';
                content: '\EA4C';
                position: absolute;
                right: 150px;
                top: 16px;
            }
            &:hover {
                transition: all .1s linear;
                box-shadow: 0 8px 16px rgba(81, 18, 130, .6);
                &:after {
                    transition: all .1s linear;
                    font-family: 'lineicons';
                    content: '\EA4C';
                    position: absolute;
                    right: 145px;
                    top: 16px;
                }
            }
        }
    }
    &__forget {
        color: $color-ciano;
        font-size: 1.6em;
        display: block;
        margin-top: 30px;
        border-bottom: 1px solid transparent;
        display: inline-block;
        transition: $transition;
        &:hover {
            border-bottom: 1px solid $color-ciano;
        }
    }
    &__register {
        background: $color-purple;
        text-align: center;
        margin-top: 100px;
        color: $color-white;
        padding: 40px;
        border-radius: 5px;
        & h1 {
            color: $color-white;
        }
        &--button {
            @extend .btn;
            background: #2ed5c4;
            margin-top: 15px;
            position: relative;
            box-shadow: 0 8px 16px lighten($color-purple, 15%);
            transition: all .2s linear;
            padding-right: 60px;
            &:after {
                font-family: 'lineicons';
                content: '\EA4C';
                position: absolute;
                right: 25px;
                top: 13px;
            }
            &:hover {
                transition: all .1s linear;
                box-shadow: 0 8px 16px lighten($color-purple, 20%);
                background: lighten($color-ciano, 10%);
                &:after {
                    transition: all .1s linear;
                    font-family: 'lineicons';
                    content: '\EA4C';
                    position: absolute;
                    right: 20px;
                    top: 13px;
                }
            }
        }
    }
}

.error {
    font-size: 1.6em;
    color: red;
    &--warning {
        @extend .error;
    }
    &--danger {
        @extend .error;
    }
}

// General forms
.form {
    &__input {
        border: 1px solid $color-purple;
        border-radius: 5px;
        padding: 10px 15px;
        width: 100%;
        transition: .3s;
        &:focus {
            transition: .3s;
            border-color: $color-ciano;
        }
        &-select {
            @extend .form__input;
            background-repeat: no-repeat;
            background-size: 15px;
            background-position: calc(100% - 10px) 50%;
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjU1cHgiIGhlaWdodD0iMjU1cHgiIHZpZXdCb3g9IjAgMCAyNTUgMjU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTUgMjU1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGcgaWQ9ImFycm93LWRyb3AtZG93biI+PHBvbHlnb24gc3R5bGU9ImZpbGw6IzgzODY4NzsiIHBvaW50cz0iMCw2My43NSAxMjcuNSwxOTEuMjUgMjU1LDYzLjc1ICIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);
        }
        &-textarea {
            @extend .form__input;
            height: 200px;
            resize: none;
        }
        &-email {
            @extend .form__input;
        }
    }
    &__radio {
        display: flex;
        & span {
            align-self: center;
            font-family: proxima-nova, sans-serif;
            font-size: 1.3em;
        }
        & input[type^='radio'] {
            display: none;
        }
        & label {
            margin-right: 10px;

            display: table;
            width: 20px;

            height: 20px;
            border: 1px solid $color-purple;
        }
        & .checked {
            background-color: $color-purple;
            background-size: 70%;
            background-repeat: no-repeat;
            background-position: center;
           	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0naXNvLTg4NTktMSc/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjYgMjYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiI+CiAgPHBhdGggc3R5bGU9ImZpbGw6I2ZmZiIgZD0ibS4zLDE0Yy0wLjItMC4yLTAuMy0wLjUtMC4zLTAuN3MwLjEtMC41IDAuMy0wLjdsMS40LTEuNGMwLjQtMC40IDEtMC40IDEuNCwwbC4xLC4xIDUuNSw1LjljMC4yLDAuMiAwLjUsMC4yIDAuNywwbDEzLjQtMTMuOWgwLjF2LTguODgxNzhlLTE2YzAuNC0wLjQgMS0wLjQgMS40LDBsMS40LDEuNGMwLjQsMC40IDAuNCwxIDAsMS40bDAsMC0xNiwxNi42Yy0wLjIsMC4yLTAuNCwwLjMtMC43LDAuMy0wLjMsMC0wLjUtMC4xLTAuNy0wLjNsLTcuOC04LjQtLjItLjN6Ii8+Cjwvc3ZnPgo=);
        }
    }
    &__submit {
        @extend .btn;
        background-color: $color-purple;
        position: relative;
    }
}