* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}


:host {
    display: inline-block;
    height: var(--tct-icon-size, 24px);
    width: var(--tct-icon-size, 24px);
    position: relative;
    fill: none;
}

svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    stroke-width: var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));
    stroke-linecap: var(--tct-icon-cap, var(--t-icon-cap, round));
    stroke-linejoin: var(--tct-icon-cap, var(--t-icon-cap, round));
}

.stroke-primary {
    stroke: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor));
}

.stroke-secondary {
    stroke: var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, currentColor));
}

.filled {
    fill: var(--tct-icon-fill, var(--t-icon-fill, none));
}

.uniform {
    fill: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor));
}

:host([type='info']) {
    color: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
    --tct-icon-stroke-primary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
    --tct-icon-stroke-secondary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
}

:host([type='success']) {
    color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
    --tct-icon-stroke-primary: var(
        --tct-stoplight-success,
        var(--const-stoplight-success, #0e8a00)
    );
    --t-icon-stroke-secondary: var(
        --tct-stoplight-success,
        var(--const-stoplight-success, #0e8a00)
    );
}

:host([type='warning']) {
    color: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
    --tct-icon-stroke-primary: var(
        --tct-stoplight-warning,
        var(--const-stoplight-warning, #f0b400)
    );
    --t-icon-stroke-secondary: var(
        --tct-stoplight-warning,
        var(--const-stoplight-warning, #f0b400)
    );
}

:host([type='error']) {
    color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
    --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
    --t-icon-stroke-secondary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
}