@use './mixins';

.trm-skeleton {
	display: flex;
	flex-direction: column;

	&--hor {
		flex-direction: row;
	}

    .skeleton-loader {
        border-radius: 16px !important;
        outline: none;
        background-color: var(--color-base-50) !important;
        border: 1px solid var(--color-base-50) !important;
        animation-duration: 2s !important;
        margin-bottom: 0 !important;
    }
}

.trm-skeleton {
    gap: 20px !important;
    @include mixins.skeleton {
        height: 80px !important;
    }
}

.trm-skeleton-fields {
    @include mixins.flexCol(20px, flex-start, stretch);
    .trm-skeleton-field {
        @include mixins.flexCol(10px, flex-start, stretch);
        &__label {
            @include mixins.skeleton {
                height: 18px !important;
                max-width: 125px !important;
            }
        }
        &__control {
            @include mixins.skeleton {
                height: 46px !important;
                @include mixins.tablet-low {
                    height: 50px !important;
                }
            }
        }
    }
}

.trm-skeleton-group {
    @include mixins.flexCol(32px, flex-start, stretch);
    &__form {
        gap: 20px !important;
        @include mixins.skeleton {
            height: 80px !important;
        }
    }
    &__header {
        @include mixins.skeleton {
            height: 120px !important;
        }
    }
    &__actions {
        gap: 10px !important;
        @include mixins.skeleton {
            height: 48px !important;
        }
    }
}