@import "colors.less";
@import "page.less";

@sprite-size: 48px / 2 96px / 2;
@sprite-url: 'sprite-48.png';

@active-color: #1854b1;

/**
 * Button
 *
 * html:
 * 
 * <button type="button" class="button">
 *   <span class="icon icon-code"></span>
 *   <span class="text">MyButton</span>
 * </button>
 */
.button {
    display: inline-block;
    background-color: #ececec;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0;
    box-sizing: border-box;
    transition: border-color 300ms;
    outline: none;

    .text {
        padding: 0 5px;
        color: @active-color;
        vertical-align: middle;
        line-height: 24px;
        font-size: 14px;
    }

    .icon {
        vertical-align: middle;
    }

    &:hover {
        border: 1px solid @active-color;
    }

    &::-moz-focus-inner {
        border: none;
    }

    &:focus {
        outline: none;
    }
}

/**
 * Icon
 *
 * html:
 *
 * <any class="icon icon-code" />
 */
.icon {
    background-image: url(@sprite-url);
    background-size: @sprite-size;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
}