/*!
 * fields/_field.less
 *
 * Copyright 2016 Achraf Chouk
 * Achraf Chouk (https://github.com/crewstyle)
 */

.olz-field {
    background-color: @white;
    border: 1px solid lighten(@gray, 20%);
    box-shadow: 0 1px 1px fade(@black, 4%);
    line-height: 1;
    margin-bottom: 20px;
    padding: 0;

    &.olz-hidden,
    &.tea-to-screen {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    &.olz-hidden .olz-title {
        display: none;
    }

    .olz-field-content {
        font-size: 13px;
        line-height: 1.4em;
        padding: 0 12px 12px;
    }
}

#poststuff .inside .olz-field {
    border: none;
    box-shadow: none;
    margin-bottom: 0;

    .olz-field-content {
        padding: 0;
    }
}

.olz-wrap {
    line-height: 1;
    margin-bottom: 20px;
    padding: 0;

    .olz-field-content p {
        margin: 5px 0;
    }

    .del-all-items,
    .del-all-images {
        color: darken(@red, 20%);
        float: right;
        font-size: 12px;
        line-height: 20px;
        text-decoration: none;

        &:hover {
            color: @red;
        }
    }
}

.inside,
.olz-wrap {
    textarea,
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"] {
        border: 1px solid lighten(@gray, 20%);
        line-height: 20px;
        outline: 0;
        padding: 4px 10px;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-transition: border ease .5s;
        -moz-transition: border ease .5s;
        transition: border ease .5s;

        &:focus {
            border-color: @main;
            box-shadow: 0 0 0 2px fade(@main, 30%), inset 0 1px 2px fade(@black, 20%);
            //color: @main;
            outline: 0;
        }
    }

    select {
        border: 1px solid lighten(@gray, 20%);
        outline: 0;
        width: 100%;
        -webkit-transition: border ease .5s;
        -moz-transition: border ease .5s;
        transition: border ease .5s;

        &:focus {
            border-color: @main;
            box-shadow: 0 0 0 2px fade(@main, 30%), inset 0 1px 2px fade(@black, 20%);
            //color: @main;
            outline: 0;
        }
    }

    textarea {
        color: @black;
        resize: vertical;

        &:focus {
            color: @black;
        }
    }

    input[readonly] {
        border-color: lighten(@gray, 30%);
        box-shadow: 0 0 0 2px fade(lighten(@gray, 30%), 40%), inset 0 1px 2px fade(@black, 20%);
    }

    .olz-checkall {
        float: right;
        font-size: 12px;
        line-height: 20px;
    }
}