:root {
    --iconSize: 60px;
    --iconBorderSize: 1px;
    --iconBorderRadius: 15%;
    --transitionDuration: 0.2s;
    --transitionTiming: ease
}

.component-icon {
    --iconScaling: var(--scaling, 56%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
    width: var(--iconSize);
    color: var(--iconColor, var(--currentColor));
    max-width: 100%;
    flex-shrink: 0
}

.component-icon[data-action-target] {
    cursor: pointer
}

.component-icon [data-action] {
    position: absolute;
    inset: 0;
    z-index: 2
}

.component-icon:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    content: "";
    border-radius: inherit;
    box-sizing: border-box;
    z-index: 0
}

.component-icon .icon-wrap {
    display: flex;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    z-index: 1
}

.component-icon .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}

.component-icon .icon.hover-icon {
    opacity: 0
}

.component-icon.style--bordered.border--medium {
    --iconBorderSize: 2px
}

.component-icon.style--bordered.border--large {
    --iconBorderSize: 3px
}

.component-icon.style--bordered.border--xlarge {
    --iconBorderSize: 5px
}

.component-icon.size--xsmall {
    --iconSize: 26px
}

.component-icon.size--small {
    --iconSize: 40px
}

.component-icon.size--medium {
    --iconSize: 60px
}

.component-icon.size--large {
    --iconSize: 80px
}

.component-icon.size--custom {
    width: var(--iconSizeFallback, var(--iconSize));
    height: var(--iconSizeFallback, var(--iconSize));
}

.component-icon.style--bordered:after,
.component-icon.style--filled:after {
    display: block
}

.component-icon.style--bordered .icon,
.component-icon.style--filled .icon {
    width: var(--iconScaling);
    height: var(--iconScaling);
    top: calc((100% - var(--iconScaling)) / 2);
    left: calc((100% - var(--iconScaling)) / 2)
}

.component-icon.style--filled:after {
    background: var(--iconColor, var(--currentColor))
}

.component-icon.style--filled .icon-wrap {
    color: var(--iconColor_contrast, var(--contrastColor))
}

.component-icon.style--bordered:after {
    border: var(--iconBorderSize) solid var(--iconColor, var(--currentColor));
    z-index: 1
}

.component-icon.shape--round {
    border-radius: 50%
}

.component-icon.shape--rounded {
    border-radius: var(--iconBorderRadius)
}

.component-icon.scale--cover .icon {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

.component-icon.color--dark {
    --currentColor: var(--darkText);
    --contrastColor: var(--darkText_contrast)
}

.component-icon.color--light {
    --currentColor: var(--lightText);
    --contrastColor: var(--lightText_contrast)
}

.component-icon.hover--opacity .icon-wrap,
.component-icon.hover--opacity:after {
    transition: opacity var(--transitionDuration) var(--transitionTiming)
}

.component-icon.hover--opacity:hover .icon-wrap,
.component-icon.hover--opacity:hover:after {
    opacity: .7
}

.component-icon.hover--zoom {
    overflow: visible
}

.component-icon.hover--zoom .icon-wrap,
.component-icon.hover--zoom:after {
    transition: transform var(--transitionDuration) var(--transitionTiming)
}

.component-icon.hover--zoom:hover.style--none .icon-wrap,
.component-icon.hover--zoom:hover:after {
    transform: scale(1.12)
}

.component-icon.hover--color .icon-wrap {
    transition: color var(--transitionDuration) var(--transitionTiming)
}

.component-icon.hover--color .icon {
    transition: opacity var(--transitionDuration) var(--transitionTiming)
}

.component-icon.hover--color:after {
    transition: color var(--transitionDuration) var(--transitionTiming), opacity var(--transitionDuration) var(--transitionTiming), background-color var(--transitionDuration) var(--transitionTiming), border-color var(--transitionDuration) var(--transitionTiming)
}

.component-icon.hover--color:not(.style--filled).color--gradient:hover .icon.hover-icon {
    opacity: 1
}

.component-icon.hover--color:not(.style--filled).color--gradient:hover .icon.hover-icon+.icon {
    opacity: 0
}