/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

.c-btn {
    display: inline-block;
    -webkit-transition: border-color .25s ease-in-out, box-shadow .1s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out;
    transition: border-color .25s ease-in-out, box-shadow .1s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

.c-btn--pill {
    border-radius: 100px
}

.c-btn--anchor {
    display: inline;
    border: 0;
    border-radius: 0;
    vertical-align: baseline;
    white-space: normal;
    font-weight: inherit
}

.c-btn::-moz-focus-inner {
    border: 0;
    padding: 0
}

.c-btn.is-hovered,
.c-btn:hover {
    text-decoration: none
}

.c-btn--anchor.is-hovered,
.c-btn--anchor:hover {
    text-decoration: underline
}

.c-btn:focus {
    outline: 0
}

.c-btn.focus-visible,
.c-btn.is-focused {
    text-decoration: none
}

.c-btn--anchor.focus-visible,
.c-btn--anchor.is-focused {
    text-decoration: underline
}

.c-btn.is-active,
.c-btn:active {
    -webkit-transition: border-color .1s ease-in-out, background-color .1s ease-in-out, color .1s ease-in-out;
    transition: border-color .1s ease-in-out, background-color .1s ease-in-out, color .1s ease-in-out;
    text-decoration: none
}

.c-btn--anchor.is-active,
.c-btn--anchor:active {
    text-decoration: underline
}

.c-btn.is-disabled,
.c-btn:disabled {
    cursor: default
}

.c-btn--anchor.is-disabled,
.c-btn--anchor:disabled {
    text-decoration: none
}

.c-btn {
    padding: 0 1.92857em;
    height: 40px;
    line-height: 38px;
    font-size: 14px
}

.c-btn--full {
    width: 100%
}

.c-btn--lg {
    padding: 0 1.92857em;
    height: 48px;
    line-height: 46px
}

.c-btn--sm {
    padding: 0 2.25em;
    height: 32px;
    line-height: 30px;
    font-size: 12px
}

.c-btn--icon {
    padding: 0;
    width: 40px
}

.c-btn--icon.c-btn--lg {
    width: 48px
}

.c-btn--icon.c-btn--sm {
    width: 32px
}

.c-btn--anchor {
    padding: 0;
    height: auto;
    line-height: normal;
    font-size: inherit
}

.c-btn {
    border-color: #1f73b7;
    background-color: transparent;
    color: #1f73b7
}

.c-btn--danger {
    border-color: #cc3340;
    color: #cc3340
}

.c-btn--primary {
    border-color: transparent;
    background-color: #1f73b7;
    color: #fff
}

.c-btn--primary.c-btn--danger {
    background-color: #cc3340
}

.c-btn--basic {
    border-color: transparent
}

.c-btn--basic.c-btn--icon {
    border: 0;
    color: #68737d
}

.c-btn--anchor {
    border-color: transparent
}

.c-btn.is-hovered,
.c-btn:hover {
    border-color: #144a75;
    background-color: rgba(31, 115, 183, .08);
    color: #144a75
}

.c-btn--danger.is-hovered,
.c-btn--danger:hover {
    border-color: #8c232c;
    background-color: rgba(204, 51, 64, .08);
    color: #8c232c
}

.c-btn--primary.is-hovered,
.c-btn--primary:hover {
    border-color: transparent;
    background-color: #144a75;
    color: #fff
}

.c-btn--primary.c-btn--danger.is-hovered,
.c-btn--primary.c-btn--danger:hover {
    background-color: #8c232c
}

.c-btn--basic.is-hovered,
.c-btn--basic:hover {
    border-color: transparent
}

.c-btn--basic.c-btn--icon.is-hovered,
.c-btn--basic.c-btn--icon:hover {
    color: #49545c
}

.c-btn--anchor.is-hovered,
.c-btn--anchor:hover {
    border-color: transparent;
    background-color: transparent
}

.c-btn.focus-visible,
.c-btn.is-focused {
    box-shadow: 0 0 0 3px rgba(31, 115, 183, .35)
}

.c-btn--focus-inset.focus-visible,
.c-btn--focus-inset.is-focused {
    box-shadow: inset 0 0 0 3px rgba(31, 115, 183, .35)
}

.c-btn--danger.focus-visible,
.c-btn--danger.is-focused {
    box-shadow: 0 0 0 3px rgba(204, 51, 64, .35)
}

.c-btn--danger.c-btn--focus-inset.focus-visible,
.c-btn--danger.c-btn--focus-inset.is-focused {
    box-shadow: inset 0 0 0 3px rgba(204, 51, 64, .35)
}

.c-btn--primary.c-btn--focus-inset.focus-visible,
.c-btn--primary.c-btn--focus-inset.is-focused {
    box-shadow: inset 0 0 0 3px hsla(0, 0, 100%, .35)
}

.c-btn--anchor.c-btn--anchor.focus-visible,
.c-btn--anchor.c-btn--anchor.is-focused {
    box-shadow: none
}

.c-btn.is-active,
.c-btn:active {
    border-color: #0f3554;
    background-color: rgba(31, 115, 183, .2);
    color: #0f3554
}

.c-btn--danger.is-active,
.c-btn--danger:active {
    border-color: #681219;
    background-color: rgba(204, 51, 64, .2);
    color: #681219
}

.c-btn--primary.is-active,
.c-btn--primary:active {
    border-color: transparent;
    background-color: #0f3554;
    color: #fff
}

.c-btn--primary.c-btn--danger.is-active,
.c-btn--primary.c-btn--danger:active {
    background-color: #681219
}

.c-btn--basic.is-active,
.c-btn--basic:active {
    border-color: transparent
}

.c-btn--basic.c-btn--icon.is-active,
.c-btn--basic.c-btn--icon:active {
    color: #2f3941
}

.c-btn--anchor.is-active,
.c-btn--anchor:active {
    border-color: none;
    background-color: transparent
}

.c-btn.is-disabled,
.c-btn:disabled {
    border-color: transparent;
    background-color: #e9ebed;
    color: #c2c8cc
}

.c-btn--anchor.is-disabled,
.c-btn--anchor:disabled {
    background-color: transparent
}

.c-btn__icon {
    -webkit-transition: -webkit-transform .25s ease-in-out;
    transition: -webkit-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
    width: 16px;
    height: 16px;
    vertical-align: middle
}

.c-btn--lg .c-btn__icon {
    width: 24px;
    height: 24px
}

.c-btn__icon.is-rotated {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.is-rtl .c-btn__icon.is-rotated {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}