// main: ../main.less, out: false, compress: false, sourceMap: false
// main: ../theme.less, out: false, compress: false, sourceMap: false

/* Buttons
/******************************/
.ckav-btn {
    .transition(0.3s);
    border-radius: 40px;
	padding: 6px 16px;
	font-size: 12px;
	box-sizing: border-box;
	border: 2px solid transparent;
	background-color: transparent;
	line-height: 1;
	position: relative;
	outline: 0px auto -webkit-focus-ring-color !important;
    display: inline-block;
    font-family: @button-font;
    text-transform: uppercase;
    font-weight: bold;
}

.ckav-btn:active,
.ckav-btn.active,
.ckav-btn:focus {
	box-shadow: none;
}

/*== Default button ===============*/
.default-btn {
    background-color: @default;
    border-color: @default;
    color: #fff;
}
.default-btn:hover,
.default-btn:focus,
.default-btn:active,
.default-btn.active {
    background-color: @dark;
    border-color: @dark;
    color: #fff;
}

/*== Primary button ===============*/
.primary-btn {
    background-color: @primary;
    border-color: @primary;
    color: #fff;
}
.primary-btn:hover,
.primary-btn:focus,
.primary-btn:active,
.primary-btn.active {
    background-color: @dark;
    border-color: @dark;
    color: #fff;
}

/*== Dark button ===============*/
.dark-btn {
    background-color: @dark;
    border-color: @dark;
    color: #fff;
}
.dark-btn:hover,
.dark-btn:focus,
.dark-btn:active,
.dark-btn.active {
    background-color: @primary;
    border-color: @primary;
    color: #fff;
}


/*== Dark button ===============*/
.white-btn {
    background-color: @white;
    border-color: @white;
    color: @dark;
}
.white-btn:hover,
.white-btn:focus,
.white-btn:active,
.white-btn.active {
    background-color: @dark;
    border-color: @dark;
    color: @white;
}
.glass.white-btn {
    background-color: transparent;
    border-color: transparent;
}
.white-btn:hover,
.white-btn:focus,
.white-btn:active,
.white-btn.active {
    background-color: @dark;
    border-color: @dark;
    color: @white;
}

.tag-btn {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 5px 12px 4px 12px;
    font-size: 11px;
    &:hover {
        background-color: @dark;
        color: @white;
    }

    &.light {
        border-color: rgba(255, 255, 255, 0.2);
        color: @white;

        &:hover {
            background-color: @white;
            color: @dark;
        }
    }
}