@use 'variables' as *;
@use 'mixins' as *;

$zwssgrfetchgmbdata: ".zwssgr";

#{$zwssgrfetchgmbdata} {
    &-fetch-gmb-data {
        margin: 20px 0 0 0;
        padding: 20px;
        background-color: var(--white-color);
        box-shadow: 0px 0.5px 2px 0px var(--extra-dark-secondary-color);
        border-radius: var(--border-radius-extra-large);
        #{$zwssgrfetchgmbdata} {
            &-response {
                width: 100%;
                .error {
                    color: var(--red-color);
                    font-size: var(--font-size-h2);
                }
                .success {
                    color: var(--green-color);
                    font-size: var(--font-size-h2);
                }
            }
        }
    }

    &-fetch-gmb-inner-data {
        display: flex;
        justify-content: left;
        align-items: center;
        @include respond-below('md') {
            flex-direction: column;
        }
        #{$zwssgrfetchgmbdata} {
            &-submit-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 14px 24px;
                width: fit-content;
                flex-direction: row-reverse;
                margin: 0;
                .spinner {
                    margin: 0;
                }
            }
            &-create-widget {
                margin: 0 10px 0 0;
                @include respond-below('md') {
                    margin: 0 0 10px 0;
                }
            }
            &-input-text {
                padding: 8px 26px 10px 16px;
                max-width: 310px;
                margin-right: 10px;
                text-overflow: ellipsis;
                line-height: 1.3;
                background: var(--white-color-200) url(../../images/down-arrow.png) no-repeat right 7px top 55%;
                background-size: 16px 10px;
                @include respond-below('md') {
                    max-width: 100%;
                    margin: 0 0 10px 0;
                }
            }
        }
    }
}