/* Base component */

.PillButton {
    align-items: center;
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 600;
    justify-content: center;
    letter-spacing: .6px;
    outline: none;
    pointer-events: auto;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition-property: all;
    transition-duration: var(--transitionDuration-200);
    transition-timing-function: ease;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    background-color: var(--gray300);
    border-radius: 9999px;
    color: rgba(0,0,0,.8);
    font-size: var(--fontSize-300);
    height: var(--spacing-500);
    line-height: 1;
    min-width: var(--spacing-500);
    padding-left: var(--spacing-300);
    padding-right: var(--spacing-300);
}
.PillButton:hover,
.PillButton:focus {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, .1)
    );
}

.PillButton:focus {
    box-shadow: 0 0 0 3px white, 0 0 0 4px var(--blue500);
}

.PillButton:active {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
    background-image: linear-gradient(
        rgba(0, 0, 0, .1),
        rgba(0, 0, 0, .1)
    );
}

/* Size modifiers */

.PillButton.size1 {
    font-size: var(--fontSize-300);
    height: var(--spacing-400);
    line-height: var(--spacing-400);
    min-width: var(--spacing-400);
    padding-left: var(--spacing-200);
    padding-right: var(--spacing-200);
}

.PillButton.size3 {
    font-size: var(--fontSize-400);
    height: var(--spacing-600);
    line-height: var(--spacing-600);
    min-width: var(--spacing-600);
}

/* Color modifiers */

.PillButton.white { background-color: var(--white); }
.PillButton.black { background-color: var(--black); color: var(--white); }

.PillButton.red { background-color: var(--red500); color: var(--white); }
.PillButton.pink { background-color: var(--pink500); color: var(--white); }
.PillButton.purple { background-color: var(--purple500); color: var(--white); }
.PillButton.violet { background-color: var(--violet500); color: var(--white); }
.PillButton.indigo { background-color: var(--indigo500); color: var(--white); }
.PillButton.blue { background-color: var(--blue500); color: var(--white); }
.PillButton.teal { background-color: var(--teal500); color: var(--white); }
.PillButton.green { background-color: var(--green500); color: var(--white); }
.PillButton.lime { background-color: var(--lime500); }
.PillButton.yellow { background-color: var(--yellow500); }
.PillButton.amber { background-color: var(--amber500); color: var(--white); }
.PillButton.orange { background-color: var(--orange500); color: var(--white); }

.PillButton.bronze { background-color: var(--bronze500); color: var(--white); }
.PillButton.gold { background-color: var(--gold500); color: var(--white); }

.PillButton.twitter { background-color: var(--twitter); color: var(--white); }
.PillButton.facebook { background-color: var(--facebook); color: var(--white); }

/* Active state */

.PillButton.is-active {
    background-color: var(--gray300);
    color: var(--gray500);
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1), inset 0 0 0 1px var(--gray400);
}
.PillButton.is-active:focus {
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1), inset 0 0 0 1px var(--gray500), 0 0 0 3px white, 0 0 0 4px var(--blue500);
    background-image: none;
}
.PillButton.is-active:hover,
.PillButton.is-active:active {
    background-image: none;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1), inset 0 0 0 1px var(--gray500);
}

/* Disabled state */

.PillButton.is-disabled {
    background-color: var(--gray200);
    box-shadow: inset 0 0 0 1px var(--gray300);
    color: var(--gray400);
    pointer-events: none;
}