@use '~@/style/globals';

.TechnicianViewInfos {
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: flex-end;
    padding-bottom: 6rem;

    &__main {
        flex: 2;
        min-width: 250px;
        margin-right: 3rem;
    }

    &__actions {
        flex: 1;
        min-width: 120px;
        padding: 1rem 0 0;
    }

    &__name,
    &__reference {
        margin-bottom: globals.$content-padding-large-vertical;
        color: globals.$text-base-color;
    }

    &__section-title {
        margin: globals.$content-padding-large-vertical 0 globals.$content-padding-small-horizontal;
    }

    &__icon {
        margin-right: globals.$content-padding-large-horizontal;
    }

    &__address,
    &__note,
    &__user {
        margin-top: 0;
        padding-left: globals.$content-padding-large-vertical;
        color: globals.$text-base-color;
    }

    &__note {
        white-space: pre-wrap;
    }

    @media screen and (min-width: globals.$screen-tablet) {
        flex-direction: row;
        justify-content: flex-start;
    }
}
