@import '../base/layout';
@import '../icons/main';

$button-padding: 6px !default;

@include exports('button/layout') {
.k-button {
    border-radius: $border-radius;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    line-height: 1.2em;
    margin: 0;
    padding: $button-padding ($button-padding * 3);
    text-align: center;
    text-decoration: none;
    user-select: none;

    [disabled] {
        cursor: default;
    }

    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    .k-icon {
        vertical-align: text-bottom;
    }

    > .k-image {
        vertical-align: middle;
    }

    .k-icon,
    > .k-image {
        margin-right: $button-padding;
    }
}

.k-button-icon {
    padding: $button-padding;
    line-height: 1em;

    .k-icon {
        margin-right: 0;
    }
}

.k-button-icon > span {
    width: 1em;
}

.k-button-icontext {
    overflow: visible; // IE9
}

.k-button-bare {
    border-width: 0;
    color: inherit;
}

.k-button-group {
    display: inline-block;
    border-width: 1px;
    border-style: solid;

    .k-button {
        border-width: 0;
        position: relative;
        margin-left: 1px;

        &::before {
            content: '';
            height: 100%;
            position: absolute;
            width: 1px;
            top: 0;
            left: 0;
            margin-left: -1px;
        }

        &.k-group-start {
            margin-left: 0;

            &::before {
                display: none;
            }
        }
    }
}
}