/* ==========================================================================
   Variables
   ========================================================================== */

@font-face {
    font-family: "Icons";
    src: url("fonts/icons/fa-solid-900.woff2") format("woff2"), url("fonts/icons/fa-solid-900.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

@font-face {
    font-family: "IconsBrands";
    src: url("fonts/icons/fa-brands-400.woff2") format("woff2"), url("fonts/icons/fa-brands-400.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

@font-face {
    font-family: "IconsRegular";
    src: url("fonts/icons/fa-regular-400.woff2") format("woff2"), url("fonts/icons/fa-regular-400.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}

@keyframes ts-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ts-icon {
    --accent-color: initial;
    --accent-foreground-color: initial;
}

/* ==========================================================================
   Base
   ========================================================================== */

.ts-icon {
    font-family: "Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: 1.18em;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    color: var(--accent-color, inherit);
}

.ts-icon:before {
    display: inline-block; /** Remove text-decoration artifacts */
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Regular
 */

.ts-icon.is-regular {
    font-family: "IconsRegular";
}

/**
 * Circular
 */

.ts-icon.is-circular,
.ts-icon.is-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 500em;
    line-height: 1;
    box-sizing: border-box;
    padding: 0.5em 0.5em;
    box-shadow: 0em 0em 0em 0.1em var(--ts-gray-300) inset;
    width: 2em;
    height: 2em;
}

.ts-icon.is-rounded {
    border-radius: var(--ts-border-radius-element);
}

/**
 * Spinning
 */

.ts-icon.is-spinning {
    display: inline-block;
    animation: ts-icon-spin 2s linear infinite;
}

/**
 * Negative
 */

.ts-icon.is-negative {
    color: var(--ts-negative-500);
}

/**
 * Rotated
 */

.ts-icon.is-rotated-90deg::before,
.ts-icon.is-clockwise-rotated::before {
    transform: rotate(90deg);
}
.ts-icon.is-rotated-180deg::before {
    transform: rotate(180deg);
}
.ts-icon.is-rotated-270deg::before,
.ts-icon.is-counterclockwise-rotated::before {
    transform: rotate(270deg);
}

/**
 * Flipped
 */

.ts-icon.is-horizontally-flipped::before {
    transform: scaleX(-1);
}
.ts-icon.is-vertically-flipped::before {
    transform: scaleY(-1);
}

/**
 * Disabled
 */

.ts-icon.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}

/**
 * Squared
 */

.ts-icon.is-squared {
    background: var(--ts-gray-100);
    border-radius: var(--ts-border-radius-element);
    font-size: 1.3em;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

/**
 * Secondary
 */

.ts-icon.is-secondary {
    color: var(--ts-gray-500);
}

/**
 * Sizes
 */

.ts-icon.is-small {
    font-size: var(--ts-font-size-13px);
}

.ts-icon.is-large {
    font-size: var(--ts-font-size-18px);
}

.ts-icon.is-big {
    font-size: var(--ts-font-size-24px);
}

.ts-icon.is-huge {
    font-size: var(--ts-font-size-30px);
}

/**
 * Heading
 */

.ts-icon.is-heading {
    line-height: 1;
    font-size: var(--ts-font-size-75px);
}

/**
 * Spaced
 */

.ts-icon.is-spaced {
    margin-left: 0.45rem;
    margin-right: 0.45rem;
}
.ts-icon.is-start-spaced {
    margin-left: 0.45rem;
}
.ts-icon.is-end-spaced {
    margin-right: 0.45rem;
}
