/***************************************************************/
/* Author: db0 (db0company@gmail.com, http://db0.fr/)          */
/* Sources/Licence: https://github.com/db0company/css-hexagon  */
/***************************************************************/

@xxs: 14px;
@xs: 22px;
@sm: 44px;
@md: 64px;
@lg: 88px;
@xl: 120px;

@default: #ebebeb;
@default-hover: #cccccc;
@primary: #428bca;
@primary-hover: #3276b1;
@success: #5cb85c;
@success-hover: #47a447;
@info: #5bc0de;
@info-hover: #39b3d7;
@warning: #f0ad4e;
@warning-hover: #ed9c28;
@danger: #d9534f;
@danger-hover: #d2322d;

@fontmultiply: 0.7;

// *********************************************************** //
// Hexagon                                                     //
// *********************************************************** //

.hexagon-content(@size, @color: white) {
    color: @color;
    text-align: center;
    font-size: @size * @fontmultiply;
    &:hover {
	color: @color;
	text-decoration: none;
    }
}

.hexagon(@side : @md, @color : @default) {
    .hexagon-content(@side);
    @radius: @side * 0.86602540378;
    margin: (@side / 2) 0;
    width: @radius * 2;
    height: @side;
    background-color: @color;
    position: relative;
    display: block;
    &:before, &:after {
	content: " ";
	width: 0;
	height: 0;
	position: absolute;
	border-left: @radius solid transparent;
	border-right: @radius solid transparent;
	left: 0;
    }
    &:before {
	border-bottom: (@side / 2) solid @color;
	top: (@side / 2 * -1);
    }
    &:after {
	border-top: (@side / 2) solid @color;
	bottom: (@side / 2 * -1);
    }
}

.hexagon-changecolor(@color) {
    background-color: @color;
    &:before {
	border-bottom-color: @color;
    }
    &:after {
	border-top-color: @color;
    }    
}

/***************************************************************/
/* Sizes                                                       */
/***************************************************************/

/* Extra Extra Small */
.hexagon-xxs {
    .hexagon(@xxs);
}
/* Extra Small */
.hexagon-xs {
    .hexagon(@xs);
}
/* Small */
.hexagon-sm {
    .hexagon(@sm);
}
/* Medium */
.hexagon-md {
    .hexagon(@md);
}
/* Large */
.hexagon-lg {
    .hexagon(@lg);
}
/* Extra large */
.hexagon-xl {
    .hexagon(@xl);
}

/***************************************************************/
/* Colors                                                      */
/***************************************************************/

/* Default */
.hexagon-default {
    .hexagon-changecolor(@default);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@default-hover);
    }
}
/* Primary */
.hexagon-primary {
    .hexagon-changecolor(@primary);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@primary-hover);
    }
}
/* Success */
.hexagon-success {
    .hexagon-changecolor(@success);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@success-hover);
    }
}
/* Info */
.hexagon-info {
    .hexagon-changecolor(@info);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@info-hover);
    }
}
/* Warning */
.hexagon-warning {
    .hexagon-changecolor(@warning);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@warning-hover);
    }
}
/* Danger */
.hexagon-danger {
    .hexagon-changecolor(@danger);
    &.hexagon-hover:hover {
	.hexagon-changecolor(@danger-hover);
    }
}

/***************************************************************/
/* Inline                                                      */
/***************************************************************/
.hexagon-inline {
    display: inline-block;
}