@import './colors.less';

input, select, textarea {
    display: block;
    background:transparent;
    color:@primary;
    outline:none;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius:15px 255px;
    font-size: 1rem;
    padding: .5rem .5rem;
    border: 2px solid @primary;
    &:focus {
        border: 2px solid @secondary;
    }
    &.disabled, &[disabled]{
        .disabled;
    }
}

.disabled{
    cursor: not-allowed;
    opacity: 0.5;
}

.form-group {
    margin-bottom: 1rem;
    > label, legend {
        display: inline-block;
        margin-bottom: .5rem;
    }
    .input-block {
        width: 100%;
    }

    textarea{
        max-width: 100%;
        max-height: 90vh;
    }

    textarea.no-resize{
        resize: none;
    }

    // TODO: make these classes implicit. We can find out what class to apply based on its type
    .paper-radio, .paper-check {
        display: block;
        margin-bottom: .5rem;
        cursor: pointer;
        input {
            border: 0;
            height: 1px; margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            display: none;
        }
        input + span {
            display: block;
        }
        /* the basic, unchecked style */
        input + span:before {
            content: '';
            display: inline-block;
            position: relative;
            width: 1rem;
            height: 1rem;
            border: 2px solid @primary;
            margin-right: 0.75em;
            vertical-align: -0.25em;
        }
        input[type="radio"] + span:before {
            border-top-left-radius: 1rem 1rem;
            border-top-right-radius: 1rem .6rem;
            border-bottom-right-radius: 1rem .9rem;
            border-bottom-left-radius: .7rem 1rem;
        }
        input[type="checkbox"] + span:before {
            border-top-left-radius: 255px 15px;
            border-top-right-radius: 15px 225px;
            border-bottom-right-radius: 225px 15px;
            border-bottom-left-radius:15px 255px;
        }

        /* the checked style using the :checked pseudo class */
        input[type="radio"]:checked + span:before {
            @escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='@{secondary}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>");
            @radio-fill: "data:image/svg+xml,@{escaped-svg}";
            background: url(@radio-fill) left center no-repeat;
        }
        input[type="checkbox"]:checked + span:before {
            @escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='@{secondary}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>");
            @check-fill: "data:image/svg+xml,@{escaped-svg}";
            background: url(@check-fill) left center no-repeat;
        }
    }
}

fieldset.form-group {
    border: none;
    padding: 0;
}