@import "gradient";
@import "shadow";

$square-blue: blue;
$square-green: green;
$square-red: red;
$square-yellow: darken(yellow, 20);

.square {
    $size: 100px;

    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    height: $size;
    margin: 10px;
    width: $size;

    @include shadow();

    &:hover  { cursor: pointer; }
    &:active { box-shadow: none; }
    &:focus  { outline: none; }

    @mixin square-color($color, $direction, $inverted) {
        @if($inverted) { @include gradient(lighten($color, 20), $color, $direction); }
        @else { @include gradient($color, lighten($color, 20), $direction); }

        &.highlighted { @include radial-gradient($color); }

        &.disabled {
            $color: desaturate($color, 50);
            @if($inverted) { @include gradient(lighten($color, 20), $color, $direction); }
            @else { @include gradient($color, lighten($color, 20), $direction); }
        }
    }

    &.blue { @include square-color($square-blue, 'bottom', false); }
    &.green { @include square-color($square-green, 'bottom', true); }
    &.red { @include square-color($square-red, 'top', false); }
    &.yellow { @include square-color($square-yellow, 'top', true); }

}