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

:host {
    background-color: $white;
    border-left: 1px dashed $border;
    border-right: 1px dashed $border;
    color: $text-color;
    display: flex;
    justify-content: center;
    font-size: $font-size-s;
    margin-bottom: -$space-s;
    margin-top: -$space-s;
    position: relative;

    .transfer {
        &-box {
            align-items: center;
            background: $white;
            border-radius: 3px;
            border: 1px solid $border;
            display: flex;
            @include h-spacing($space-s);
            position: relative;
            overflow-x: hidden;
            z-index: 1;

            @include mobile() {
                width: 90%;
            }
        }

        &-icon {
            display: flex;
            align-items: flex-start;
            align-self: stretch;

            padding: $space-m2 $space-m 0;

            border-right: 1px solid $border;

            svg {
                fill: $orange;
                height: 6.5px;
                width: 20.5px;
            }
        }

        &-caption {
            font-weight: $font-medium;

            @include mobile() {
                width: 100%;
            }
        }

        &-time {
            align-items: center;
            display: flex;
            @include h-spacing($space-s);
        }

        &-content {
            align-items: center;
            display: flex;
            flex: 1;
            padding: $space-s;

            @include gt-mobile() {
                @include h-spacing($space-s);
            }

            @include mobile() {
                @include v-spacing($space-s);
                flex-wrap: wrap;
                & > * {
                    flex: 100%;
                }
            }
        }
    }

    &:after {
        border-top: 1px dotted $border;
        content: ' ';
        position: absolute;
        top: 50%;
        width: 100%;
        z-index: 0;
    }
}
