* {
    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;
}

.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
}

.flex-left {
    justify-content: flex-start;
}

.flex-right {
    justify-content: flex-end;
}

.flex-v-center {
    align-items: center;
}

.no-margin {
    margin: 0;
}

:host {
    display: block;
}

:host([inline]),
:host([modifiers*='inline']) {
    display: inline-block;
}

:host([hidden]) {
    display: none;
}

:host(:not([inline]):not([modifiers*='inline'])) {
    font-size: var(--tct-loading-spinner-size, var(--tct-scale-5, var(--app-scale-5, 60px)));
}

.q2-loading-animation {
    height: 1em;
    width: 1em;
}

.half-circle-spinner,
.half-circle-spinner * {
    box-sizing: border-box;
}

.half-circle-spinner {
    border-radius: 100%;
    position: relative;
}

.half-circle-spinner .circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: calc(1em / 12) solid transparent;
}

.half-circle-spinner .circle.circle-1 {
    border-top-color: var(--tct-loading-primary-color, var(--t-loading-primary-color, #2e2e2e));
    animation: half-circle-spinner-animation 1s infinite;
}

.half-circle-spinner .circle.circle-2 {
    border-bottom-color: var(
        --tct-loading-secondary-color,
        var(--t-loading-secondary-color, #cccccc)
    );
    animation: half-circle-spinner-animation 1s infinite alternate;
}

@keyframes half-circle-spinner-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.q2-loading-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    --q2-loading-skeleton-shimmer-color: var(--tct-loading-skeleton-shimmer-color, rgba(255, 255, 255, 0.5));
    --q2-loading-skeleton-vertical-gap: var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));
    --q2-loading-skeleton-horizontal-gap: var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px));
}

.q2-loading-skeleton-shimmer {
    position: absolute;
    width: 1rem;
    height: 100%;
    top: 0;
    left: -100px;
    animation: skeletonShimmer 3s ease-in-out infinite;
    background-color: var(--q2-loading-skeleton-shimmer-color);
    box-shadow: 0 0 25px 20px var(--q2-loading-skeleton-shimmer-color);
    transform: rotate(10deg);
}

/* Atoms */
.skeleton-shape:not(.no-margin) {
    margin: var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px))
        var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px));
}

.skeleton-shape.circle,
.skeleton-shape.rectangle {
    background-color: var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, #f2f2f2));
}

.skeleton-shape.circle {
    border-radius: 50%;
}


/* Uitils */
.flex .rectangle {
    flex-grow: 1;
}

/* Table */
.skeleton-table-row .rectangle {
    margin: var(--q2-loading-skeleton-vertical-gap) var(--q2-loading-skeleton-horizontal-gap);
}

.skeleton-table-row .rectangle:not(:first-child):not(:last-child) {
    flex-grow: 2;
}

.skeleton-table-row-border .skeleton-shape {
    margin: 0 var(--q2-loading-skeleton-horizontal-gap);
}

/* form */
.form {
    flex-wrap: wrap;
}

.form .field{
    margin: var(--q2-loading-skeleton-vertical-gap) 0;
}

.form.columns-1 .field{
    flex-basis: 100%;
}

.form.columns-2 .field{
    flex-basis: 50%;
}

.form.columns-3 .field{
    flex-basis: 33.3333%;
}

.form.columns-4 .field{
    flex-basis: 25%;
}

.form.columns-5 .field{
    flex-basis: 20%;
}

/* text */
.text .rectangle {
    margin-bottom: 0;
}

.text .header.center {
    margin: 0 auto;
}

.text .header.right {
    margin-left: auto;
}

.text .header {
    height: 1.5rem;
}

.text .header.smaller {
    height: 1rem;
}

/* Detailed Item */ 
.detailed-item {
    flex-wrap: wrap;
}

.detailed-item.right {
    flex-flow: row-reverse;
}

.detailed-item-image {
    flex: 0 0 auto;
    display: inline-flex;
}

.center .detailed-item-image {
    flex-basis: 100%;
    display: flex;
}

.detailed-item-image .rectangle {
    flex-grow: 0;
}

.detailed-item-text > div {
    width: 100%;
}

.detailed-item-text {
    flex: 1 1 auto;
}

.detailed-item-text .text {
    margin-top: 0;
    margin-bottom: 0;
}

/* Label-value */ 
.label-value {
    flex-wrap: wrap;
}

.label-value .rectangle {
    flex-basis: calc(50% - 2 * var(--q2-loading-skeleton-horizontal-gap));
}

@keyframes skeletonShimmer {
    0% {
        left: -100px;
        opacity: 1;
    }
    70% {
       opacity: 1; 
    }
    100% {
        left: 800px;
        opacity: 0;
    }
}