@import "dependencies";

.willow-button {
    @include set-text-style($text-style-heading-4);
    @include set-button-style($neutral, "default");

    border-radius: $component-button-border-radius;
    cursor: pointer;
    display: block;
    margin: $space-stack;
    padding: $space-inset-squish;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.15s all;
    width: 100%;

    &:focus {
        @include set-button-style($neutral, "focus");
    }

    &:visited {
        @include set-button-style($neutral, "visited");
    }

    &:hover {
        @include set-button-style($neutral, "hover");
    }

    &:active {
        @include set-button-style($neutral, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($neutral, "disabled");

        cursor: $component-cursor-disabled;
    }
}

.willow-button--primary {
    @include set-button-style($primary, "default");

    &:focus {
        @include set-button-style($primary, "focus");
    }

    &:visited {
        @include set-button-style($primary, "visited");
    }

    &:hover {
        @include set-button-style($primary, "hover");
    }

    &:active {
        @include set-button-style($primary, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($primary, "disabled");
    }
}

.willow-button--negative {
    @include set-button-style($negative, "default");

    &:focus {
        @include set-button-style($negative, "focus");
    }

    &:visited {
        @include set-button-style($negative, "visited");
    }

    &:hover {
        @include set-button-style($negative, "hover");
    }

    &:active {
        @include set-button-style($negative, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($negative, "disabled");
    }
}

.willow-button--positive {
    @include set-button-style($positive, "default");

    &:focus {
        @include set-button-style($positive, "focus");
    }

    &:visited {
        @include set-button-style($positive, "visited");
    }

    &:hover {
        @include set-button-style($positive, "hover");
    }

    &:active {
        @include set-button-style($positive, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($positive, "disabled");
    }
}

.willow-button--ghost {
    @include set-button-style($ghost, "default");

    &:focus {
        @include set-button-style($ghost, "focus");
    }

    &:visited {
        @include set-button-style($ghost, "visited");
    }

    &:hover {
        @include set-button-style($ghost, "hover");
    }

    &:active {
        @include set-button-style($ghost, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($ghost, "disabled");
    }
}

.willow-button--ghost-inverse {
    @include set-button-style($ghost-inverse, "default");

    &:focus {
        @include set-button-style($ghost-inverse, "focus");
    }

    &:visited {
        @include set-button-style($ghost-inverse, "visited");
    }

    &:hover {
        @include set-button-style($ghost-inverse, "hover");
    }

    &:active {
        @include set-button-style($ghost-inverse, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($ghost-inverse, "disabled");
    }
}

.willow-button--cta {
    @include set-button-style($cta, "default");

    padding: $space-inset-squish-l;

    &:focus {
        @include set-button-style($cta, "focus");
    }

    &:visited {
        @include set-button-style($cta, "visited");
    }

    &:hover {
        @include set-button-style($cta, "hover");
    }

    &:active {
        @include set-button-style($cta, "active");
    }

    &[disabled],
    &[data-disabled="true"] {
        @include set-button-style($cta, "disabled");
    }
}

.willow-button--inline {
    display: inline-block;
    width: auto;
}