blog/src/components/molecules/ModalThanks.module.scss

@import 'variables';

.modalThanks {
    @media (min-width: $screen-sm) {
        display: flex;
        justify-content: space-between;
    }
}

.coin {
    margin-top: $spacer;

    @media (min-width: $screen-sm) {
        width: 48%;
        margin-top: 0;
    }

    h4 {
        font-size: $font-size-large;
        margin-top: 0;
        margin-bottom: $spacer / 2;
        color: $brand-grey;
        text-align: center;
    }

    > svg {
        margin-bottom: $spacer / 2;
    }

    pre {
        margin: 0;
        position: relative;
        padding: 0;
        padding-right: 2rem;

        code {
            padding: $spacer / 2;
            font-size: .65rem;
            text-align: center;
        }
    }

    button {
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border: 0;
        box-shadow: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background: rgba($brand-grey, .3);
        padding: $spacer / 3;

        svg {
            width: 1rem;
            height: 1rem;
            fill: $brand-grey;
            transition: .15s ease-out;
        }

        &:hover {
            svg {
                fill: $brand-grey-dimmed;
            }
        }
    }
}