// hide the main title and collapse thingee for the add images area
#ase_gallery_component {
    .handlediv,
    h3 {
        display: none;
    }
}

// gallery images metabox
#ase-gallery-images {
    .clearfix();
    margin:20px 10px 5px;

    .ase-gallery-image {
        float:left;
        width:120px;
        height:120px;
    }

    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
}

// single gallery image
.ase-gallery-image {
    position:relative;
    margin-right:8px;
    .transition(transform .1s ease);
    i {
        top:3px;
        position: absolute;
        z-index:1;
        color:white;
        text-shadow:0 1px 1px rgba(0,0,0,0.5);
        .opacity(0.6);
        .transition(opacity .25s ease);

        &:hover {
            cursor: pointer;
            .opacity(1.0);
        }

        &.dashicons-edit {
            left:6px;
        }
    }

    i.dashicons-no-alt {
        right:4px;
    }

    i.dashicons-edit {
        right:20px;
    }

    img{
        max-width:120px;
    }

    // being dragged
    &.ui-sortable-helper {
        -ms-transform: rotate(7deg); /* IE 9 */
        -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
        transform: rotate(7deg);
    }
}

// placeholder
#ase-gallery-add-image {
    position:relative;
    margin:20px auto 0;
    padding:0;
    height:32px;
    width:180px;
    display: block;
    text-transform: uppercase;

    i {
        width:auto;
        height:32px;
        font-size:14px;
        line-height: 1.2;
        display:block;
        padding:5px 10px;
        .box-sizing(border-box);

        &:before {
            position:relative;
            top:3px;
            left:-3px;
        }
    }
}

// dropzone
.ase-gallery-drop-zone {
    border: 1px solid #fcefa1;
    background: #fbf9ee;
    color: #363636;
    width:120px;
    height:120px;
    float:left;
    margin-right:10px;
}

// Select Layout
#ase_gallery_layout{

    position: relative;

    input[type="radio"] {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    label {
        position: relative;
        display:inline-block;
        height:100px;
        width:120px;
        overflow: hidden;
        text-align: center;
        background:darken(#fafafa,3);
        padding:5px;
        box-sizing:border-box;
        border-radius:4px;
        border:1px solid #dfdfdf;
        transition:opacity .15s ease-in-out;
        opacity:0.4;
        margin-right:10px !important;

        &:last-of-type {
            margin-right: 0 !important;
        }

        &:after {
            content:'';
            background-image:url('../img/aesop-gallery-layout-sprite.png');
            background-size:99%;
            position: absolute;
            height:88px;
            display: block;
            left:0;
            right:0;
        }

        &:hover {
            opacity:1.0;
        }
    }

    .selected {
        box-shadow:inset 0 0 12px -2px rgba(0,0,0,0.15);
        opacity:1.0;

    }

    label:first-of-type:after {
        background-position: -1px -15px;
    }
    label:nth-of-type(2):after {
        background-position: -1px -93px;
    }
    label:nth-of-type(3):after {
        background-position: 0 -178px;
    }
    label:nth-of-type(4):after {
        background-position: 1px -263px;
    }
    label:nth-of-type(5):after { 
        background-position: 0 -347px;
    }
    label:nth-of-type(6):after {
        background-position: 0 -420px;
    }
}

// Set Options
#ase_gallery_options {

    .ase-gallery-opts {
        clear:left;
        .clearfix();

        h3 {
            border-bottom:1px solid #eee;
            padding-left:0;
            margin:10px auto;
        }
    }
    .inside{

        .clearfix();

        // universal
        .ase-gallery-opts--single {
            width:50%;
            display: inline-block;
            vertical-align: top;
            margin-right:-4px;
        }
    }

    // general alyout
    .ase-gallery-opts--single {
        label {
            font-weight:bold;
        }

        textarea {
            width:100%;
        }

        p {
            color:#888;
            line-height:1.2;
            margin-top:3px;
            padding-right:10px;
            .box-sizing(border-box);
        }
    }

    // thumb
    .ase-gallery-opts--thumb {
        .ase-gallery-opts--single:first-of-type{
            margin-bottom:15px;
        }
    }

}