@ebay/skin/dist/icon-button/icon-button.css

Skin - CSS modules that represent the brand eBay

a.icon-link {
    align-items: center;
    display: inline-flex;
}
a.icon-link > svg {
    margin: 0 auto;
}

a.icon-link,
button.icon-btn {
    background-color: var(
        --icon-button-background-color,
        var(--color-background-secondary)
    );
    border: 2px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: inherit;
    height: 40px;
    justify-content: center;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    width: 40px;
}
a.icon-link > svg,
button.icon-btn > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-primary)
    );
    max-width: 75%;
    position: relative;
}
a.icon-link:focus,
a.icon-link:hover,
button.icon-btn:focus,
button.icon-btn:hover {
    background-color: var(--color-state-secondary-hover);
}
a.icon-link:active,
button.icon-btn:active {
    background-color: var(--color-state-secondary-active);
}
a.icon-link:not(:focus-visible),
button.icon-btn:not(:focus-visible) {
    outline: none;
}

a.icon-link.icon-link--primary,
button.icon-btn.icon-btn--primary {
    background-color: var(
        --btn-primary-background-color,
        var(--color-background-accent)
    );
    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
    color: var(
        --btn-primary-foreground-color,
        var(--color-foreground-on-accent)
    );
}

a.icon-link.icon-link--primary > svg,
button.icon-btn.icon-btn--primary > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-on-accent)
    );
}

a.icon-link.icon-link--secondary > svg,
button.icon-btn.icon-btn--secondary > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-accent)
    );
}

a.icon-link.icon-link--small .progress-spinner,
button.icon-btn.icon-btn--small .progress-spinner {
    height: 20px;
    width: 20px;
}

a.icon-link.icon-link--transparent > svg,
button.icon-btn.icon-btn--transparent > svg {
    max-width: 100%;
}

a.icon-link.icon-link--small,
button.icon-btn.icon-btn--small {
    height: 32px;
    width: 32px;
}

a.icon-link.icon-link--large,
button.icon-btn.icon-btn--large {
    height: 48px;
    width: 48px;
}
a.icon-link--transparent,
a.icon-link--transparent:active,
a.icon-link--transparent:focus,
a.icon-link--transparent:hover,
button.icon-btn--transparent,
button.icon-btn--transparent:active,
button.icon-btn--transparent:focus,
button.icon-btn--transparent:hover {
    background-color: initial;
}

a.icon-link:visited > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-primary)
    );
}

a:not([href]).icon-link > svg,
a[aria-disabled="true"].icon-link > svg,
button[aria-disabled="true"].icon-btn > svg,
button[disabled].icon-btn > svg {
    background-color: initial;
    fill: var(--color-background-disabled);
}
a:not([href]).icon-link:focus > svg,
a:not([href]).icon-link:hover > svg,
a[aria-disabled="true"].icon-link:focus > svg,
a[aria-disabled="true"].icon-link:hover > svg,
button[aria-disabled="true"].icon-btn:focus > svg,
button[aria-disabled="true"].icon-btn:hover > svg,
button[disabled].icon-btn:focus > svg,
button[disabled].icon-btn:hover > svg {
    fill: var(--color-background-disabled);
}

a.icon-link:visited:focus > svg,
a.icon-link:visited:hover > svg {
    fill: var(
        --icon-button-icon-hover-foreground-color,
        var(--color-foreground-primary)
    );
}

a.icon-link.icon-link--primary:visited > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-on-accent)
    );
}

a.icon-link--badged,
button.icon-btn--badged {
    overflow: visible;
    position: relative;
}
a.icon-link--badged .badge,
button.icon-btn--badged .badge {
    left: 24px;
    pointer-events: none;
    position: absolute;
    top: -12px;
    z-index: 1;
}
a.icon-link > svg.icon--confirmation-filled-16,
a.icon-link > svg.icon--confirmation-filled-16:hover,
a.icon-link > svg.icon--confirmation-filled-24,
a.icon-link > svg.icon--confirmation-filled-24:hover,
button.icon-btn > svg.icon--confirmation-filled-16,
button.icon-btn > svg.icon--confirmation-filled-16:hover,
button.icon-btn > svg.icon--confirmation-filled-24,
button.icon-btn > svg.icon--confirmation-filled-24:hover {
    fill: var(--color-foreground-confirmation);
}
a.icon-link > svg.icon--attention-filled-16,
a.icon-link > svg.icon--attention-filled-16:hover,
a.icon-link > svg.icon--attention-filled-24,
a.icon-link > svg.icon--attention-filled-24:hover,
button.icon-btn > svg.icon--attention-filled-16,
button.icon-btn > svg.icon--attention-filled-16:hover,
button.icon-btn > svg.icon--attention-filled-24,
button.icon-btn > svg.icon--attention-filled-24:hover {
    fill: var(--color-foreground-attention);
}
a.icon-link > svg.icon--information-filled-16,
a.icon-link > svg.icon--information-filled-16:hover,
a.icon-link > svg.icon--information-filled-24,
a.icon-link > svg.icon--information-filled-24:hover,
button.icon-btn > svg.icon--information-filled-16,
button.icon-btn > svg.icon--information-filled-16:hover,
button.icon-btn > svg.icon--information-filled-24,
button.icon-btn > svg.icon--information-filled-24:hover {
    fill: var(--color-foreground-information);
}

a.icon-link.icon-link--primary,
a.icon-link.icon-link--secondary,
a.icon-link.icon-link--tertiary,
button.icon-btn.icon-btn--primary,
button.icon-btn.icon-btn--secondary,
button.icon-btn.icon-btn--tertiary {
    border-width: 1px;
}

a:not([href]).icon-link.icon-link--primary,
a[aria-disabled="true"].icon-link.icon-link--primary,
button[aria-disabled="true"].icon-btn.icon-btn--primary,
button[disabled].icon-btn.icon-btn--primary {
    background-color: var(
        --icon-button-disabled-background-color,
        var(--color-background-disabled)
    );
    border-color: var(
        --btn-primary-disabled-border-color,
        var(--color-stroke-disabled)
    );
}

a:not([href]).icon-link.icon-link--primary > svg,
a[aria-disabled="true"].icon-link.icon-link--primary > svg,
button[aria-disabled="true"].icon-btn.icon-btn--primary > svg,
button[disabled].icon-btn.icon-btn--primary > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-on-accent)
    );
}

a.icon-link.icon-link--primary .progress-spinner,
button.icon-btn.icon-btn--primary .progress-spinner {
    --color-spinner-icon-background: var(--color-background-primary);
    --color-spinner-icon-foreground: #8fa3f8;
}

a.icon-link.icon-link--secondary,
button.icon-btn.icon-btn--secondary {
    background-color: initial;
    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
    color: var(
        --btn-secondary-foreground-color,
        var(--color-foreground-accent)
    );
}

a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):focus,
a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):hover,
button.icon-btn.icon-btn--primary:not([disabled], [aria-disabled="true"]):focus,
button.icon-btn.icon-btn--primary:not(
        [disabled],
        [aria-disabled="true"]
    ):hover {
    background-blend-mode: multiply;
    filter: brightness(96%);
}
a.icon-link.icon-link--primary:not([disabled], [aria-disabled="true"]):active,
button.icon-btn.icon-btn--primary:not(
        [disabled],
        [aria-disabled="true"]
    ):active {
    filter: brightness(92%);
}

a.icon-link.icon-link--secondary .progress-spinner,
a.icon-link.icon-link--tertiary .progress-spinner,
button.icon-btn.icon-btn--secondary .progress-spinner,
button.icon-btn.icon-btn--tertiary .progress-spinner {
    --color-spinner-icon-foreground: #3665f366;
}

a:not([href]).icon-link.icon-link--secondary,
a[aria-disabled="true"].icon-link.icon-link--secondary,
button[aria-disabled="true"].icon-btn.icon-btn--secondary,
button[disabled].icon-btn.icon-btn--secondary {
    border-color: var(
        --btn-secondary-disabled-border-color,
        var(--color-stroke-disabled)
    );
}

a:not([href]).icon-link.icon-blinktn--secondary > svg,
a[aria-disabled="true"].icon-link.icon-link--secondary > svg,
button[aria-disabled="true"].icon-btn.icon-btn--secondary > svg,
button[disabled].icon-btn.icon-btn--secondary > svg {
    fill: var(
        --icon-button-icon-foreground-color,
        var(--color-foreground-disabled)
    );
}

a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):focus,
a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):hover,
button.icon-btn.icon-btn--secondary:not(
        [disabled],
        [aria-disabled="true"]
    ):focus,
button.icon-btn.icon-btn--secondary:not(
        [disabled],
        [aria-disabled="true"]
    ):hover {
    background-color: var(--color-state-secondary-hover);
}
a.icon-link.icon-link--secondary:not([disabled], [aria-disabled="true"]):active,
button.icon-btn.icon-btn--secondary:not(
        [disabled],
        [aria-disabled="true"]
    ):active {
    background-color: var(--color-state-secondary-active);
}

a.icon-link.icon-link--tertiary,
button.icon-btn.icon-btn--tertiary {
    background-color: initial;
    border-color: var(--btn-primary-border-color, var(--color-stroke-default));
    color: var(--btn-primary-foreground-color, var(--color-foreground-accent));
}

a:not([href]).icon-link.icon-link--tertiary,
a[aria-disabled="true"].icon-link.icon-link--tertiary,
button[aria-disabled="true"].icon-btn.icon-btn--tertiary,
button[disabled].icon-btn.icon-btn--tertiary {
    border-color: var(
        --btn-tertiary-disabled-border-color,
        var(--color-stroke-disabled)
    );
}

a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):focus,
a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):hover,
button.icon-btn.icon-btn--tertiary:not(
        [disabled],
        [aria-disabled="true"]
    ):focus,
button.icon-btn.icon-btn--tertiary:not(
        [disabled],
        [aria-disabled="true"]
    ):hover {
    background-color: var(--color-state-secondary-hover);
}
a.icon-link.icon-link--tertiary:not([disabled], [aria-disabled="true"]):active,
button.icon-btn.icon-btn--tertiary:not(
        [disabled],
        [aria-disabled="true"]
    ):active {
    background-color: var(--color-state-secondary-active);
}