/**************************************
    Template Selector
 **************************************/
.wp-tiles-template-selector {
    list-style: none;
    overflow: hidden;
}

$use-template-selector-background-color: false !default;
.wp-tiles-template {
    //$button-color: #008CBA;
    $template-selector-color: #444 !default;
    border: none;
    border-radius: 2px;
    cursor: pointer;

    font-weight: normal;
    line-height: normal;
    margin: 0 1em 1em 0;
    float: left;

    text-decoration: none;
    text-align: center;

    padding: 0.88889em 1.77778em 0.94444em;
    font-size: 0.88889em;

    background-color: $template-selector-color;
    color: #FFF;

    // Opacity is not the ideal property to use for the hover effect. However,
    // we want to let the user choose their own background color, so we can't
    // use scale-lightness. Compile the SCSS with your own BG color and the
    // var below set to true to use the background color instead.

    @if ( $use-template-selector-background-color ) {
        @include transition( background-color 300ms ease-out 0s );
    } @else {
        opacity: 1;
        @include transition( opacity 300ms ease-out 0s );
    }

    &:hover {
        @if ( $use-template-selector-background-color ) {
            background-color: scale-lightness( $template-selector-color, 5% );
        } @else {
            opacity: 0.8;
        }
    }

    .wp-tiles-legacy & {
        @include background-image(linear-gradient(#252525,#0A0A0A));
        border: 1px solid #ffffff;

        display: inline;
        border-radius: 10px;
        color: white;
        cursor: pointer;
        text-align: center;
        padding: 6px 9px;

        &:hover {
            border: 1px solid #999999;
        }
    }
}