// Button theme
// ===

.pw-button {
    padding: 0;

    background: transparent;

    color: inherit;
    text-align: center;

    transition: background 0.5s ease-in;

    -webkit-appearance: none;

    &:active,
    &:focus {
        background: rgba(0, 0, 0, 0.1);
    }
}


// Inner
// ---

.pw-button__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}


// Icon
// ---

.pw-button__icon {
    flex: 0 0 auto;
}


// Themes: Primary
// ---

.pw-button.pw--primary {
    padding: $unit*1.5;

    background: $primary-action-color;

    color: $neutral-00;
    font-weight: $semi-bold-font-weight;

    &:active,
    &:focus {
        background: $dark-primary-action-color;

        color: $neutral-00;
    }
}


// Themes: Secondary
// ---

.pw-button.pw--secondary {
    padding: $unit*1.5;

    background: $secondary-action-color;

    color: $neutral-00;
    font-weight: $semi-bold-font-weight;

    &:active,
    &:focus {
        background: $dark-secondary-action-color;

        color: $neutral-00;
    }
}


// Themes: Tertiary
// ---

.pw-button.pw--tertiary {
    padding: $unit*1.5;
    border: $border;

    background: $neutral-00;

    color: $secondary-brand-color;
    font-weight: $semi-bold-font-weight;

    &:active,
    &:focus {
        background: $neutral-10;

        color: $secondary-brand-color;
    }
}


// Themes: Link
// ---
//
// Allow button elements to resemble as an inline link element

.pw-button.pw--link {
    min-width: initial;
    min-height: initial;
    padding: 0;

    background: none;

    color: $link-color;
    font-weight: $regular-font-weight;
}


// State: Disabled button
// ---

.pw-button[disabled] {
    .pw-button__icon {
        color: $tertiary-brand-color;
    }
}

.pw-button.pw--primary,
.pw-button.pw--secondary {
    &[disabled] {
        background: $disabled-button-background-color;
    }
}

.pw-button.pw--tertiary[disabled] {
    border-width: 0;

    background: $disabled-button-background-color;
}


// State: Button icon has siblings
// ---

.pw-button__icon.pw--has-siblings {
    margin-right: $sub-unit*3;
}


// Social Themes
// ---

// Facebook
.pw-button.pw--facebook {
    background: $facebook-color;

    color: $neutral-00;
}

// Twitter
.pw-button.pw--twitter {
    background: $twitter-color;

    color: $neutral-00;
}

// Instagram
.pw-button.pw--instagram {
    background: $instagram-color;

    color: $neutral-00;
}

// Pinterest
.pw-button.pw--pinterest {
    background: $pinterest-color;

    color: $neutral-00;
}

// Youtube
.pw-button.pw--youtube {
    background: $youtube-color;

    color: $neutral-00;
}

// Google Plus
.pw-button.pw--google-plus {
    background: $google-plus-color;

    color: $neutral-00;
}

// Yelp
.pw-button.pw--yelp {
    background: $yelp-color;

    color: $neutral-00;
}