/* ------------------------------------------------------------------------------
*
*  # Autofill extension
*
*  Spreadsheets such as Excel and Google Docs have a very handy data duplication
*  option of an auto fill tool
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Handle
.dt-autofill-handle {
    position: absolute;
    height: 8px;
    width: 8px;
    z-index: 102;
    border: 1px solid @brand-primary;
    background: @brand-primary;
}

// Select frame
.dt-autofill-select {
    position: absolute;
    z-index: 1001;
    background-color: @brand-primary;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, fade(#fff, 75%) 5px, fade(#fff, 75%) 10px);

    // Vertical lines
    &.top,
    &.bottom {
        height: 1px;
    }

    // Horizontal lines
    &.left,
    &.right {
        width: 1px;
    }
}


// Confirmation dialog
.dt-autofill-list {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    background-color: @modal-content-bg;
    border-radius: @border-radius-base;
    border: 1px solid @modal-content-border-color;
    z-index: @zindex-modal;
    padding: @list-spacing 0;

    // List
    ul {
        display: table;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;

        // List items
        li {
            display: table-row;

            // Highlight row on hover
            &:hover {
                background-color: @dropdown-link-hover-bg;
            }
        }
    }

    // Text label
    .dt-autofill-question {
        display: table-cell;
        padding: @padding-base-vertical @content-padding-base;

        // Text label input
        input[type=number] {
            padding: 6px;
            width: 30px;
            margin: -2px 0;
        }
    }

    // Confirm button
    .dt-autofill-button {
        display: table-cell;
        padding: @padding-base-vertical @content-padding-base;
        text-align: right;

        // Button itself
        .btn {
            padding: 3px;
            background-color: @brand-primary;
            color: #fff;
            font-size: 0;

            // Checkmark icon
            &:after {
                content: '\e9c3';
                font-family: 'Icomoon';
                display: block;
                font-size: @icon-font-size;
                width: @icon-font-size;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            // Mute button on hover
            &:hover {
                .opacity(0.85);
            }
        }
    }
}

// Overlay
.dt-autofill-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @modal-backdrop-bg;
    z-index: @zindex-modal-background;
    .opacity(@modal-backdrop-opacity);
}