@import './slick/slick';

.dgfw-available-gifts {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 1em;
    padding: 1em;
    background: #f8f8f8;

    button.slick-arrow {
        position: absolute;
        top: 30%;
        left: 0;
        width: 2em;
        height: 2em;
        padding: 0;
        margin: 0;
        border-radius: 2em;
        overflow: hidden;
        z-index: 10;

        &:before {
            content: "«";
            font-weight: bold;
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em;
            text-align: center;
        }
    }

    button.slick-next {
        right: 0;
        left: auto;

        &:before {
            content: "»";
        }
    }

    .slick-dots {
        list-style-type: none;
        text-align: center;
        margin: 0.5em 0;
        padding: 0;

        > li {
            list-style-type: none;
            display: inline-block;

            > button {
                display: inline-block;
                overflow: hidden;
                width: 10px;
                height: 10px;
                padding: 0 0 0 10px;
                margin: 0 3px;
                border-radius: 10px;
            }

            &:not(.slick-active) {
                > button {
                    background: rgba(0,0,0,0.3);
                }
            }
        }
    }

    [dir="rtl"] & {
        button.slick-arrow {
            right: 0;

            // &:before {
            //     content: "»";
            // }
        }

        button.slick-next {
            left: 0;
            right: auto;

            // &:before {
            //     content: "«";
            // }
        }

        .slick-dots {

            > li {

                > button {
                    padding: 0 10px 0 0;
                    margin: 0 3px;
                }
            }
        }

    }
}

.dgfw-gift {
    display: inline-block;
    width: 75%;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.5s;

    @media screen and (min-width: 480px) {
       width: 45%;
    }

    @media screen and (min-width: 600px) {
       width: 30%;
    }

    @media screen and (min-width: 1024px) {
       width: 23%;
    }

    .slick-slider &,
    .no-slick-needed & {
        opacity: 1;
    }

    .dgfw-add-gift-button,
    .dgfw-select-gift-button {
        max-width: 100%;
        word-break: break-word;
        white-space: normal !important;
    }

}

.dgfw-gift-link {
    display: block;
    text-align: center;

    .dgfw-gift-thumbnail {
        width: 100%;
        text-align: center;
    }

    .dgfw-gift-thumbnail img {
        float: none;
        display: inline-block;
        margin: 0;
    }

    .product-name {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
}

.dgfw-available-gifts-title {
    text-align: center;
}

.dgfw-product-giftable-variations {
    clear: both;
    margin-top: 30px;
    text-align: left;

    &:after {
        content: '';
        display: block;
        clear: both;
    }

    .images {
        width: 41.1764705882%;
        float: left;
        margin-bottom: 3.631em;
        opacity: 1 !important;
    }

    .summary {
        width: 52.9411764706%;
        float: right;
        margin-right: 0;
    }
}

// we're using div.product instead of wc form.product, so wee need to duplicate
// some css from woocommerce.css
.woocommerce div.product div.cart  {
    .variations {
        margin-bottom: 1em;
        border: 0;
        width: 100%;

        .label {
            color: inherit;
        }

        select {
            max-width: 100%;
            min-width: 75%;
            display: inline-block;
            margin-right: 1em;
        }

        tr {
            background: none;
        }

    }

    table,
    tr,
    td {
        border-width: 0;
    }
}