button
{
    @include transition;

    padding: 0;
    border: 0;

    background: none;

    cursor: pointer;
}

button.link
{
    @include link-button;
}

.button
{
    @include antialiasing;
    @include font-dimensions(16px, steps(2), 0.9px);
    @include button-icons($color-background-lightest);
    @include transition;
    @include button-shadow;

    display: inline-block;
    width: 100%;
    padding: steps(1.5) steps(3.5);

    background: $color-link-normal;
    text-align: center;
    cursor: pointer;

    border-radius: 25px;

    &,
    &:active
    {
        color: $color-background-lightest;
    }

    &:hover
    {
        text-decoration: none;
    }

    &:hover,
    &:focus
    {
        background: $color-link-active;
    }

    &.disabled,
    &:disabled
    {
        @include disabled;

        color: $color-background-lightest;
        background: $color-background-darker;
    }

    @include for-at-least-tablets
    {
        width: auto;
    }
}

.button.secondary
{
    @include button-icons($color-link-normal, $color-text-inverted-lighter);

    padding: (steps(1.5) - 1px) (steps(2.5) - 1px);
    border: 1px solid;

    color: $color-link-normal;
    background: $color-background-lightest;

    &:hover,
    &:focus
    {
        border-color: $color-link-active;

        color: $color-text-inverted-lighter;
        background: $color-link-active;
    }

    &.disabled,
    &:disabled
    {
        color: $color-text-lightest;
    }
}

.button.large
{
    @include product-box;

    &:hover
    {
        background-color: #E97D28;
    }
}
