@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;

@mixin _layout($space: $space-m) {
    display: flex;
    align-items: center;
    @include h-spacing($space);
}

:host {
    @include _layout($space-l);
    font-size: $font-size-s;
    background-color: $blue-extra-light;
    border: 1px solid $blue-light2;
    padding: $space-m $space-l;
    min-height: 50px;

    .transfer {
        &-icon {
            svg {
                fill: $orange;
                width: 20.5px;
                height: 6.5px;
            }

            @include mobile {
                align-self: flex-start;
            }
        }

        &-content {
            @include _layout();
            flex: 1;

            @include mobile() {
                @include v-spacing($space-s);
                flex-direction: column;
                align-items: flex-start;
            }
        }

        &-type {
            font-weight: $font-medium;
        }

        &-duration {
            @include _layout();

            flex: 1;
        }

        &-times {
            flex-shrink: 0;

            @include _layout();
        }

        &-time {
            @include _layout();
        }

        &-section {
            @include gt-mobile {
                justify-content: flex-end;
            }
        }
    }

    .description {
        color: $blue-dark;
    }

    // variations
    &.separated {
        margin: $space-m 0;
        border-radius: 3px;
    }
}