@import 'includes/mixins';
@import 'includes/vars';
@import 'includes/fonts-milk';

/* Values used by all boxes. */
$box-padding = 20px;
$box-border-width = 1px;
$box-border = $box-border-width solid #d8d4ca;
$box-border-hover-color = #25a;
$selection-border-width = 2px;

/* Values used by "step" boxes (choose a color, choose a technology, etc.). */
$step-box-width = 620px;
$step-box-total-width = ($step-box-width + ($box-padding * 2) + ($box-border-width * 2));

/* Values used for image alignment, and other alignment that is based on image alignment. */
$number-of-images = 4;
$img-width = 120px;
$img-nohover-padding = 1px;
/* Some messy math here. Basically, this is the space available in #step-design
   after the widths, margins, paddings, and borders of children elements are
   taken into consideration, divided by the number of margins needed. */
$img-margin-right = (($step-box-width - ($img-width * $number-of-images) - (($img-nohover-padding + $selection-border-width + $box-border-width) * 2 * $number-of-images)) / ($number-of-images - 1));

/* Values used by the preview box that floats off to the right. */
$preview-box-width = $img-width;
$preview-box-left-margin = 10px;
$preview-box-total-width = ($preview-box-width + ($box-padding * 2) + ($box-border-width * 2));

#promote-buttons {
    #page-head {
        text-align: center;

        ol {
            list-style-position: inside;
            list-style-type: decimal;
            margin: $grid-spacing 0;
            text-align: left;
        }

        h1 {
            margin-bottom: 2px;
        }

        h2 {
            font-weight: normal;
        }
    }

    section {
        padding-top: 0;
    }
}

#button-builder {
    margin: 0 auto;
    overflow: hidden;

    /* Make the box wide enough to contain the entire step box, the entire
       preview box, and the desired amount of space between them. */
    width: ($step-box-total-width + $preview-box-left-margin + $preview-box-total-width);

    .step {
        border: $box-border;
        margin: 0 0 10px;
        padding: $box-padding;
        vendorize-value(background, linear-gradient, '(top, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 80%)');
        width: $step-box-width;
    }

    h3, h4, label {
        set-font-size($base-bump-font-size);
    }

    h4 {
        margin-top: 12px;
        margin-bottom: @margin-top;
    }

    li {
        float: left;

        &:last-child {
            margin-right: 0;
        }
    }

    h3, h4 {
        /* Use the same margin that is used by images, so that the left
           edge of the image and the left edge of the heading line up. */
        margin-left: $selection-border-width;
    }

    h3 {
        font-weight: bold;
        letter-spacing: .5px;
    }

    input {
        position: absolute;
        left: -9999px;
    }

    label {
        cursor: pointer;
        display: block;
    }

    ul {
        list-style: none;
        padding: 0;
    }
}


/*
    Every list item in #step-design contains an image. Every list item in every
    other section contains text only. We need to keep this in mind when applying
    shadows.

    We could just apply the shadow to list items across the board, but that
    would make the "selected" border show up in the wrong place for
    #step-design selections.
*/
#step-color li, #step-topic li, #step-design img {
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
}

#step-design {
    li {
        margin-right: $img-margin-right;
        overflow: hidden;
    }

    img {
        border: $box-border;
        display: block;
        margin: $selection-border-width;
        padding: $img-nohover-padding;
    }

    img:hover, li.selected img {
        border-color: $box-border-hover-color;

        /* Swap some spacing around, so that a border can be added without
           changing the overall size of the box. Nifty. */
        border-width: $selection-border-width;
        margin: $img-nohover-padding;
    }
}

#step-color, #step-topic {
    li {
        border: $box-border;
        padding: 2px;
        width: $img-width;

        /* Very similar to what we do with $img-margin-right above. We assume
           that four list items are shown so that even if fewer list items are
           shown, they all lign up with the images in #step-design. Neato. */
        margin-right: (($step-box-width - ($box-border * 2 * $number-of-images) - (@padding * 2 * $number-of-images) - (@width * 4)) / ($number-of-images - 1));
    }

    label {
        color: #fff;
        display: block;
        overflow: hidden;
        padding: 8px 10px;
        text-align: center;
        text-shadow: 0 0 3px rgba(0,0,0,.5), 1px 1px 0 #000;
        text-transform: uppercase;
    }

    li:hover, li.selected {
        border-color: $box-border-hover-color;
        border-width: $selection-border-width;
        width: $img-width - @border-width; /* Make room for the border. */

        label {
            margin: -1px;
        }
    }

    .gray, .Gray {
        label {
            background: #443f3e;
        }
    }

    .orange, .Orange {
        label {
            background: #f16a22;
        }
    }

    .red, .Red {
        label {
            background: #ec2224;
        }
    }
}

#step-topic {
    label {
        text-transform: none;
        letter-spacing: 1px;

        /* Font face and other font settings are set to resemble the fonts
           shown in the static images as closely as possible. */
        font: normal 18px/1 "Milk", sans-serif;
    }
}

#button-code {
    font: 12px monospace;
    height: 80px;
    padding: 5px;
    width: $step-box-width - (@padding * 2);
}

#button-preview {
    width: $preview-box-width;
    padding: $box-padding;
    border: $box-border;

    /* Thanks to the #button-builder width we set above, there should be
       $preview-box-margin-left amount of space on the left of this box after
       it is floated right. */
    float: right;

    &.fixed {
        margin-left: ($step-box-total-width + $preview-box-left-margin);
        position: fixed;
        z-index: 99;
        top: 20px;
    }
}

#button-image {
    display: block;
}
