Ghost/ghost/admin/app/styles/patterns/buttons.css

/* Buttons
/* ---------------------------------------------------------- */

/* Base button style */
/* Should only be applied to <a> tags */
.gh-btn,
.gh-btn-grey {
    display: inline-block;
    outline: none;
    background: var(--whitegrey);
    color: var(--darkgrey);
    text-decoration: none !important;
    user-select: none;
    fill: var(--white);
    font-weight: 500;
    border-radius: 3px;
    transition: all 0.2s ease;
    transition-property: color, border-color, background, width, height, box-shadow;

    -webkit-font-smoothing: subpixel-antialiased;
}

/* ALL buttons must have a span for content */
.gh-btn span,
.gh-btn-grey span {
    display: block;
    overflow: hidden;
    padding: 0 14px;
    height: 34px;
    font-size: 1.35rem;
    line-height: 34px;
    text-align: center;
    letter-spacing: 0.2px;
    border-radius: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gh-btn-large span {
    height: 40px;
    padding: 0 20px;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: .4px;
}

.gh-btn:hover,
.gh-btn-grey:hover {
    color: var(--darkgrey);
    background: var(--whitegrey-d1);
}

.gh-btn svg {
    display: inline-block;
    vertical-align: middle;
}

.gh-btn-large svg {
    width: 16px;
    height: 16px;
}

/* When disabled */
.gh-btn.disabled,
.gh-btn[disabled],
fieldset[disabled] .gh-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary button
/* ---------------------------------------------------------- */
.gh-btn-primary,
.gh-btn-black {
    color: var(--white);
    background: var(--black);
    font-weight: 500;
}

.gh-btn-primary:hover,
.gh-btn-black:hover {
    color: var(--white);
    background: color-mod(var(--black) l(-20%)) !important;
}

/* Blue button
/* ---------------------------------------------------------- */

/* The background of the button creates 1px gradient border */
.gh-btn-blue {
    color: #fff;
    fill: #fff;
    background: var(--blue);
    font-weight: 500;
}

.gh-btn-blue:hover {
    color: #fff !important;
    background: color-mod(var(--blue) l(-4%)) !important;
}

/* When clicked or focused with keyboard */
.gh-btn-blue:active,
.gh-btn-blue:focus {
    background: color-mod(var(--blue) l(-7%)) !important;
}

/* Green button
/* ---------------------------------------------------------- */

/* The background of the button creates 1px gradient border */
.gh-btn-green {
    color: #fff;
    fill: #fff;
    background: var(--green);
    font-weight: 500;
}

.gh-btn-green:hover {
    color: #fff !important;
    background: color-mod(var(--green) l(-4%)) !important;
}

/* When clicked or focused with keyboard */
.gh-btn-green:active,
.gh-btn-green:focus {
    background: color-mod(var(--green) l(-7%)) !important;
}


/* Red button
/* ---------------------------------------------------------- */

/* The background of the button creates 1px gradient border */
.gh-btn-red {
    color: #fff;
    fill: #fff;
    box-shadow: none;
    background: var(--red);
    font-weight: 500;
}

.gh-btn-red:hover {
    color: #fff;
    background: color-mod(var(--red) l(-4%)) !important;
}

/* When clicked or focused with keyboard */
.gh-btn-red:active,
.gh-btn-red:focus {
    background: color-mod(var(--red) l(-7%)) !important;
}

/* Outline button
/* ---------------------------------------------------------- */

/* The background of the button creates 1px gradient border */
.gh-btn-outline {
    color: var(--darkgrey);
    border: 1px solid var(--lightgrey-l1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: none;
}

.gh-btn-outline:hover {
    color: var(--black);
    background: none;
    border-color: var(--lightgrey);
}

/* When clicked or focused with keyboard */
.gh-btn-outline:active,
.gh-btn-outline:focus {
    border-color: color-mod(var(--lightgrey-l1) l(-15%));
}

.gh-btn-outline.blue {
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: none;
}

.gh-btn-outline.blue:hover {
    border-color: color-mod(var(--blue) l(-10%));
    color: color-mod(var(--blue) l(-10%));
    box-shadow: none;
}


/* Button highlights
/* ---------------------------------------------------------- */

.gh-btn-hover-blue:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.gh-btn-hover-green:hover {
    color: var(--green);
    border-color: var(--green);
}

.gh-btn-hover-red:hover {
    color: var(--red);
    border-color: var(--red);
}

.gh-btn-hover-background:hover {
    background: var(--lightgrey);
}


/* Special Buttons
/* ---------------------------------------------------------- */

.gh-btn-white {
    border: none;
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: none;
}

.gh-btn-white:hover {
    background: var(--white);
}

.gh-btn-white.gh-btn-green:hover,
.gh-btn-white.gh-btn-blue:hover {
    border: none;
}

.gh-btn-strong {
    border-color: color-mod(var(--midgrey) l(+25%));
}

.gh-btn-block {
    display: block;
    width: 100%;
}

.gh-btn-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gh-btn-icon svg,
.gh-btn-block svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.6em;
}

.gh-btn-icon svg.gh-spinner {
    left: 5px;
}

.gh-btn-icon svg.gh-spinner rect {
    fill: color-mod(var(--midgrey) l(+15%));
}

.gh-btn:not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-red) svg.gh-icon-spinner rect {
    fill: color-mod(var(--midgrey) l(-7%));
} 

.gh-btn-icon-right svg,
svg.gh-btn-icon-right {
    margin-left: 0.5em;
    margin-right: 0;
    width: auto;
    height: 16px;
}

.gh-btn-icon svg path {
    stroke: currentColor;
}

.gh-btn-icon.fill svg {
    fill: currentColor;
}

.gh-btn-icon.fill svg path {
    stroke: none;
}

.gh-btn-icon-no-margin {
    margin: 0;
}

.gh-btn-text,
.gh-btn-text:hover {
    display: flex;
    align-items: center;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

.gh-btn-text.inline {
    display: inline-flex;
}

.gh-btn-text span {
    height: unset;
    line-height: unset;
    padding: 0;
}

.gh-btn-text.regular span {
    font-size: 1.4rem;
    color: var(--darkgrey);
}

.gh-btn-text.blue span {
    color: var(--blue);
}

.gh-btn-text.red span {
    color: var(--red);
}

.gh-btn-text.yellow span {
    color: color-mod(var(--yellow) l(-10%));
}

.gh-btn-text.green span {
    color: var(--green-d1);
}

.gh-btn-textfield-group span {
    height: 36px;
    line-height: 36px;
}

.gh-btn-text.gh-btn-warningdetails span,
.gh-btn-text.gh-btn-errordetails span {
    text-decoration: underline;
}

.gh-btn-text.gh-btn-warningdetails span {
    color: color-mod(var(--yellow) l(-8%) s(+5%));
}

.gh-btn-text.gh-btn-errordetails span {
    color: var(--red);
}

.gh-btn-action-icon {
    margin-right: 10px
}

.gh-btn-action-icon svg {
    height: 16px;
    width: 16px;
    margin: 0;
}

.gh-btn-action-icon:not(.icon-only) svg {
    margin-right: 10px;
}

.gh-btn-action-icon svg path,
.gh-btn-action-icon svg circle {
    stroke: currentColor;
}

.gh-btn-label-green {
    color: var(--green);
}


/*
/* Button Variations
/* ---------------------------------------------------------- */

.gh-btn-block {
    display: block;
    width: 100%;
}

/* Vertically space out multiple block buttons */
.gh-btn-block + .gh-btn-block {
    margin-top: 5px;
}

/* Specificity overrides */
input[type="submit"].gh-btn-block,
input[type="reset"].gh-btn-block,
input[type="button"].gh-btn-block {
    width: 100%;
}


/*
/* Button Groups
/* ---------------------------------------------------------- */
/*

Usage: CTA buttons grouped together horizontally.

<div class="gh-btn-group">
    <a class="gh-btn gh-btn-green" href="#"><span>Button 1</span></a>
    <a class="gh-btn gh-btn-white" href="#"><span>Button 2</span></a>
</div>

*/

.gh-btn-group {
    display: flex;
    align-items: center;
    background: var(--whitegrey-l1);
    border-radius: 3px;
    line-height: 0;
}

.gh-btn-group .gh-btn {
    border: none;
    background: none;
    margin: 0;
    background: transparent !important;
    box-shadow: none;
    margin: 2px;
    border-radius: 2px;
    color: var(--midgrey);
}

.gh-btn-group .gh-btn span {
    border-radius: 0;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    background: transparent !important;
    font-weight: 500 !important;
}

.gh-btn-group .gh-btn-group-selected span {
    color: var(--black);
    background: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.gh-btn-group .gh-btn-group-selected svg {
    fill: var(--black);
}

.gh-btn-group.icons .gh-btn {
    margin: 3px;
    border-radius: 3px;
}

.gh-btn-group.icons .gh-btn span {
    height: 28px;
    padding: 0 8px;
}

.gh-btn-group.icons .gh-btn-icon svg {
    width: 16px;
    height: 16px;
    margin-right: 0;
    fill: var(--darkgrey);
}

.gh-btn-group.icons .gh-btn-group-selected svg {
    fill: var(--black);
}

.gh-btn-group.icons .gh-btn-icon svg path {
    stroke: none;
}

.gh-btn-group.small .gh-btn span {
    font-size: 0.9rem;
}

.gh-btn-block + .gh-btn-block {
    margin-top: 5px;
}

.gh-btn-link {
    border: none;
    background: none;
    box-shadow: none;
}

.gh-btn-link:hover {
    background: none;
    box-shadow: none;
}

.gh-btn-link.blue {
    color: var(--blue);
}

/* Tab buttons */
/* ---------------------------------------------------------- */
.gh-btn-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid var(--whitegrey);
}

.gh-btn-tabs .gh-btn {
    background: none !important;
    border-radius: 0;
    margin-right: 20px;
    border-bottom: 1px solid transparent;
}

.gh-btn-tabs .gh-btn span {
    background: none !important;
    border-radius: 0;
    padding: 0;
    color: var(--midgrey);
    font-weight: 500 !important;
}

.gh-btn-tabs .gh-btn span:hover {
    color: var(--darkgrey);
}

.gh-btn-tabs .gh-btn-tab-selected {
    border-bottom-color: var(--black);
}

.gh-btn-tabs .gh-btn-tab-selected span {
    color: var(--black);
}


/* Spin Buttons!
/* ---------------------------------------------------------- */
.spinner {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: -2px 0;
    width: 14px;
    height: 14px;
    border: rgba(0,0,0,0.2) solid 4px;
    border-radius: 100px;
    animation: spin 1s linear infinite;
}

.spinner:before {
    content: "";
    display: block;
    margin-top: 6px;
    width: 4px;
    height: 4px;
    background: rgba(0,0,0,0.6);
    border-radius: 100px;
}

/* Filter buttons
/* ---------------------------------------------------------- */
.gh-btn-filter {
    height: 33px;
    line-height: 33px;
    border-radius: 0px;
    color: var(--darkgrey);
}

.gh-btn-filter.first {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.gh-btn-filter.last {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.gh-btn .gh-btn-filter-maxwidth {
    display: flex;
    align-items: center;
}

.gh-btn .gh-btn-filter-maxwidth span {
    padding: 0;
    margin: 0 4px 0 0;
    display: inline-block;
    max-width: 160px;
}

.gh-btn-filter-maxwidth svg {
    height: 4px;
    width: 6.11px;
    margin-left: 2px;
    margin-top: -2px;
    vertical-align: middle;
}

/* Stripe Connect button
/* ---------------------------------------------------------- */
.stripe-connect {
    background: #635bff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    text-decoration: none;
    min-width: 180px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
}

.stripe-connect span {
    color: #ffffff;
    display: block;
    font-family: sohne-var, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 14px;
    padding: 1px 0 0;
    margin: 0;
    position: relative;
    text-align: left;
}

.stripe-connect:hover {
    background: #7a73ff;
}

.stripe-connect span::after {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: 132px;
    background-position: center;
    content: "";
    height: 16px;
    width: 132px;
}

.stripe-connect span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='132' height='16' viewBox='0 0 132 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1443_3527)'%3E%3Cpath d='M2 7.6C2 5.3 3.3 3.7 5 3.7C6.3 3.7 7.2 4.5 7.5 5.7L9.3 5.1C8.7 3.2 7.2 2 5 2C2.1 2 0 4.3 0 7.6C0 10.9 2.1 13.2 5 13.2C7.2 13.2 8.7 12 9.3 10.1L7.5 9.5C7.2 10.8 6.3 11.5 5 11.5C3.2 11.5 2 9.9 2 7.6ZM17.6 9.1C17.6 6.7 16 5 13.8 5C11.6 5 10 6.6 10 9.1C10 11.6 11.6 13.2 13.8 13.2C16.1 13.2 17.6 11.5 17.6 9.1ZM11.9 9.1C11.9 7.5 12.7 6.5 13.9 6.5C15.1 6.5 15.9 7.5 15.9 9.1C15.9 10.7 15.1 11.7 13.9 11.7C12.7 11.7 11.9 10.7 11.9 9.1ZM19 13H20.8V8.4C20.8 7.3 21.6 6.7 22.4 6.7C23.4 6.7 23.8 7.4 23.8 8.4V13H25.6V7.8C25.6 6.1 24.6 5 23 5C22 5 21.3 5.5 20.8 6V5.2H19V13ZM27.5 13H29.3V8.4C29.3 7.3 30.1 6.7 30.9 6.7C31.9 6.7 32.3 7.4 32.3 8.4V13H34.1V7.8C34.1 6.1 33.1 5 31.5 5C30.5 5 29.8 5.5 29.3 6V5.2H27.5V13V13ZM39.3 13.2C40.9 13.2 42.1 12.4 42.7 11L41.2 10.4C41 11.2 40.3 11.7 39.4 11.7C38.2 11.7 37.4 10.9 37.3 9.5H42.8V8.9C42.8 6.7 41.6 5 39.3 5C37.1 5 35.5 6.8 35.5 9.1C35.5 11.5 37 13.2 39.3 13.2ZM39.2 6.5C40.3 6.5 40.9 7.3 40.9 8.1H37.3C37.5 7 38.3 6.5 39.2 6.5ZM45.4 9.1C45.4 7.5 46.2 6.6 47.5 6.6C48.5 6.6 49 7.2 49.3 8.1L50.8 7.3C50.4 6 49.2 5.1 47.5 5.1C45.3 5.1 43.6 6.8 43.6 9.2C43.6 11.6 45.2 13.3 47.5 13.3C49.2 13.3 50.4 12.3 50.8 11L49.3 10.2C49.1 11.1 48.5 11.7 47.5 11.7C46.2 11.6 45.4 10.7 45.4 9.1ZM52 11C52 12.6 52.8 13.1 54.3 13.1C54.8 13.1 55.2 13.1 55.5 13V11.5C55.2 11.5 55.1 11.5 54.8 11.5C54.2 11.5 53.7 11.4 53.7 10.7V6.6H55.4V5.1H53.7V2.8H51.9V5.1H50.8V6.6H51.9L52 11ZM63.7 5.1L62.3 10.3L60.9 5.1H59.1L61.5 13H63.1L64.5 7.8L65.9 13H67.5L69.9 5.1H68.1L66.6 10.3L65.2 5.1H63.7ZM70.8 4.1H72.6V2.3H70.7L70.8 4.1ZM72.6 5.1H70.8V13H72.6V5.1ZM74.6 11C74.6 12.6 75.4 13.1 76.9 13.1C77.4 13.1 77.8 13.1 78.1 13V11.5C77.8 11.5 77.7 11.5 77.4 11.5C76.8 11.5 76.3 11.4 76.3 10.7V6.6H78V5.1H76.3V2.8H74.6V5.1H73.5V6.6H74.6V11ZM79.5 13H81.3V8.4C81.3 7.3 82.1 6.7 82.9 6.7C83.9 6.7 84.3 7.4 84.3 8.4V13H86.1V7.8C86.1 6.1 85.1 5 83.5 5C82.5 5 81.8 5.5 81.3 6V2.3H79.5V13Z' fill='white'/%3E%3Cpath d='M117.1 15.3999V12.3999C117.5 12.6999 118 13.0999 119 13.0999C120.9 13.0999 122.6 11.5999 122.6 8.1999C122.6 5.0999 120.9 3.3999 119 3.3999C118 3.3999 117.3 3.8999 116.9 4.2999L116.8 3.6999H114.5V15.9999L117.1 15.3999ZM118.3 5.6999C119.3 5.6999 119.9 6.7999 119.9 8.1999C119.9 9.6999 119.3 10.6999 118.3 10.6999C117.7 10.6999 117.3 10.4999 117 10.1999V6.1999C117.4 5.9999 117.7 5.6999 118.3 5.6999Z' fill='white'/%3E%3Cpath d='M127.701 13.1998C129.001 13.1998 129.901 12.8998 130.701 12.4998V10.2998C130.001 10.6998 129.201 10.8998 128.101 10.8998C127.001 10.8998 126.201 10.4998 126.001 9.19981H131.201C131.201 8.99981 131.201 8.49981 131.201 8.19981C131.201 5.39981 129.901 3.2998 127.401 3.2998C124.901 3.2998 123.301 5.49981 123.301 8.19981C123.301 11.4998 125.101 13.1998 127.701 13.1998ZM127.401 5.4998C128.001 5.4998 128.701 5.99981 128.701 7.19981H125.901C126.001 6.09981 126.701 5.4998 127.401 5.4998Z' fill='white'/%3E%3Cpath d='M107.6 6.49991C108.2 5.59991 109.3 5.79991 109.6 5.89991V3.39991C109.2 3.29991 108 2.99991 107.5 4.19991L107.3 3.39991H105V12.7999H107.6V6.49991Z' fill='white'/%3E%3Cpath d='M95.6016 10.1998C95.6016 10.6998 95.2016 10.7998 94.6016 10.7998C93.7016 10.7998 92.6016 10.3998 91.7016 9.8998V12.4998C92.7016 12.8998 93.7016 13.0998 94.6016 13.0998C96.8016 13.0998 98.3016 11.9998 98.3016 10.0998C98.3016 6.8998 94.3016 7.4998 94.3016 6.2998C94.3016 5.8998 94.6016 5.69981 95.2016 5.69981C96.0016 5.69981 97.0016 5.8998 97.8016 6.3998V3.7998C96.9016 3.3998 96.1016 3.2998 95.2016 3.2998C93.1016 3.2998 91.6016 4.3998 91.6016 6.2998C91.6016 9.3998 95.6016 8.89981 95.6016 10.1998Z' fill='white'/%3E%3Cpath d='M102.001 13.2002C102.801 13.2002 103.501 13.0002 103.901 12.8002V10.6002C103.601 10.7002 101.901 11.2002 101.901 9.6002V5.80019H103.901V3.5002H101.901V1.2002L99.3008 1.8002V10.4002C99.3008 12.0002 100.401 13.2002 102.001 13.2002Z' fill='white'/%3E%3Cpath d='M110.5 0.6V2.7L113.2 2.2V0L110.5 0.6Z' fill='white'/%3E%3Cpath d='M113.1 3.5H110.5V12.
}


.gh-btn-stripe-status {
    position: relative;
    box-shadow: none;
    color: var(--darkgrey-l2);
    padding-left: 12px;
}

.gh-btn-stripe-status::before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    height: 6px;
    width: 6px;
    margin: auto;
    background: var(--midlightgrey);
    border-radius: 999px;
}

.gh-btn-stripe-status.connected:before {
    background: var(--green);
}

.stripe-connect.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Conditional wording for mobile to save space */
.gh-btn .gh-btn-text-hide-for-mobile {
    display: none;
}

.gh-btn-with-notification {
    position: relative;
}

.gh-btn-notification-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    display: block;
    content: "";
    width: 14px !important;
    height: 14px !important;
    background: var(--green);
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--main-bg-color);
}