@use '../abstract/mixin' as *;

.coins-overlay {
    position: absolute;
    top: calc(50% - 50px);
    left: 0;

    z-index: 1;
    padding-inline-start: 16px;

    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        color: white;
        font-size: 1.1rem;

        padding-inline: 8px;
        border: 1px solid white;
        border-radius: 2em;
        height: 100px;

        .divider {
            width: 100%;
            height: 4px;
            border-bottom: 1px solid white;
        }
    }
}

@include phoneAndSmaller {
    .coins-overlay {
        top: 0;
        left: calc(50% - 40px);

        padding-inline-start: 8px;
        padding-block-start: 8px;

        .wrapper {
            flex-direction: row;
            height: 32px;
            border-radius: 1.4em;

            .divider {
                width: 12px;
                border: none;
                position: relative;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '/';
                    transform: translateY(-46%);
                }
            }
        }
    }
}
