@import "../rem-sizes";
@import "../color-palette";

.button {
    display: inline-block;

    text-align: center;
    vertical-align: middle;

    cursor: pointer;

    margin: 0;
    padding: @8px @20px;
    border-radius: @4px;

    font-size: @16px;
    font-weight: 400;
    line-height: @18px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: hidden;

    transition: all ease-out 100ms;
    transition-property: color, background-color, border, box-shadow;

    &:disabled {
        cursor: not-allowed;
    }

    &.button--small {
        border-radius: @2px;
        padding: @2px @10px;
        font-size: @14px;
        line-height: @20px;
    }

    &.button--large {
        padding: @14px @20px;
    }

    &.button--primary {
        border: 1px solid @primary-500;
        background-color: @primary-500;
        color: @white;
        text-decoration: none;

        &:focus {
            outline: none;
            box-shadow: 0 0 @4px 1px rgba(0, 101, 172, 0.45); // @primary-500
        }

        &:hover {
            border: 1px solid @primary-600;
            background-color: @primary-600;
        }
    }

    &.button--secondary {
        border: 1px solid @secondary-700;
        background-color: @transparent;
        color: @secondary-900;
        text-decoration: none;

        &:focus {
            outline: none;
            box-shadow: 0 0 @4px 1px rgba(68, 92, 117, 0.45); // @secondary-900
        }

        &:hover {
            border: 1px solid @secondary-700;
            background-color: @secondary-700;
            color: @white;
        }
    }

    &.button--danger {
        border: 1px solid @red-500;
        background-color: @transparent;
        color: @red-500;
        text-decoration: none;

        &:focus {
            outline: none;
            box-shadow: 0 0 0.25rem 1px rgba(255, 85, 85, 0.45); // @red-500
        }

        &:hover {
            border: 1px solid @red-500;
            background-color: @red-500;
            color: @white;
        }
    }
}