@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$loadingItemHeight: 72px;

.c-image-collector-component {
    min-height: 100%;
    height: 100%;
    position: relative;
    padding-bottom: 80px;
}

    .c-image-collector-component__wrapper {
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        position: relative;
    }
        .c-image-collector-component__list {
            list-style: none;
            margin: 0;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            @include mq($until: tablet) {
                max-width: 345px;
                margin: auto;
            }
            @media screen and (max-width: 386px) {
                max-width: 230px;
            }
            @include mq($from: tablet) {
                justify-content: space-between;
            }
        }
            .c-image-collector-component__item {
                min-width: $loadingItemHeight;
                max-width: 50%;
                position: relative;
                margin-bottom: 7px;
                overflow: hidden;
                @include mq($until: tablet) {
                    margin-left: 4px;
                    margin-right: 5px;
                }
            }

                .c-image-collector-component__item--hover-effect{
                    cursor: pointer;
                    &:hover::after {
                        content: "";
                        display: block;
                        width: 100%;
                        height: 100%;
                        border: 2px solid $accent-a;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
                .c-image-collector-component__item--selected {
                    $selected-border-color: $accent-a;
                    &::after {
                        content: '';
                        @include fill-parent();
                        @include mq($until: tablet) {
                            background-color: transparentize($grey-super-dark, 0.8);
                        }
                        @include mq($from: tablet) {
                            border: 6px solid $selected-border-color;
                        }
                    }
                }

                .c-image-collector-component__item__used-marker-mobile {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 50%;
                    background-color: $white-color;
                    z-index: 1;
                    display: flex;
                }

                    .c-image-collector-component__item__used-marker-mobile__icon {
                        opacity: 0.6;
                    }

            .c-image-collector-component__upload-component {
                padding-bottom: 16px;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;

                @include ios-less-than(11) {
                    padding-bottom: 103px;
                }

            }

            .c-image-collector-component__upload-btn {
                padding: 10px;
                width: 100%;
            }

                .c-image-collector-component__upload-btn__inner {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .c-image-collector-component__upload-btn__icon {
                    margin-left: 10px;
                }