/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

@import 'variables';

@mixin speed-dials (
    $aside-width,
    $container-width,
    $section-padding,
    $inner-content-width,

    $dial-height,
    $dial-padding,
    $dial-header-title,
    $dial-title-font-size,
    $dial-delete-background,
    $logo-size,
    $logo-font-size,
    $logo-line-height,
    $logo-padding,
    $delete-button-position-right,
    $add-dial-form-submit-margin,
    $add-dial-form-error-position,

    $dial-header-color,
    $dial-header-font-size,
    $dial-header-text-shadow,
    $dial-title-text-shadow,

    $dial-button-plus-background,
    $dial-button-plus-opacity,
    $dial-button-plus-opacity-hover,
    $dial-logo-border,
    $dial-logo-box-shadow,
    $dial-logo-box-shadow-hover,
    $dial-title-color,
    $dial-title-color-hover,
    $dial-empty-bg-color,
){
    $dial-edit-background: url(../images/pencil.svg) no-repeat center;
    $dial-logo-color: #fff;
    $pagination-header: 30px;
    $dial-header-height: 15px;

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    #section-most-visited {
        margin-top: 12px;
    }

    #section-favorites {
        margin-top: 20px;
    }

    #section-most-visited, #section-favorites {
        min-height: $dial-height + $dial-header-height + $pagination-header;

        .dial-header {
            font-size: $dial-header-font-size;
            color: $dial-header-color;
            animation: fadeIn 0.5s;
            overflow: hidden;
            position: relative;
            text-shadow: $dial-header-text-shadow;
        }

        .dials-row {
            display: flex;
            height: $dial-height;
            margin-bottom: $section-padding;
            opacity: 1;
        }

        .dial {
            height: $dial-height;
            width: calc(#{$container-width} / 6);
            padding: $dial-padding;
            position: relative;
            text-decoration: none;
        }

        .logo {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            height: $logo-size;
            width: $logo-size;
            padding: $logo-padding;
            background-origin: content-box;
            font-size: $logo-font-size;
            line-height: $logo-line-height;
            box-sizing: border-box;
            color: $dial-logo-color;
            font-weight: 700;
            margin: 0 auto;
            border-radius: 4px;
            box-shadow: $dial-logo-box-shadow;
            position: relative;
            transition: box-shadow 180ms cubic-bezier(0.4, 0.0, 0.2, 1);

            &::after {
                content: ' ';
                width: inherit;
                height: inherit;
                border-radius: inherit;
                position: absolute;
                top: 0px;
                left: 0px;
                border: $dial-logo-border;
                opacity: 0.3;
                box-sizing: border-box;
            }
        }

        .title {
            margin: 7px auto 0 auto;
            font-size: $dial-title-font-size;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            max-width: 150px;
            text-overflow: ellipsis;
            color: $dial-title-color;
            cursor: pointer;
            text-decoration: none;
            text-shadow: $dial-title-text-shadow;
        }

        .edit {
            position: absolute;
            top: 0;
            right: $delete-button-position-right;
            visibility: hidden;
            opacity: 0;
            width: 20px;
            height: 20px;
            background: $dial-edit-background;
            background-color: white;
            border-radius: 18px;
            box-shadow: 0px 2px 3px -1px get-color-black-opacity(0.18);
            border: 0px;
            cursor: pointer;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            transition: visibility 0s linear 300ms, opacity 300ms;
        }

        .delete {
            position: absolute;
            top: 0;
            right: $delete-button-position-right;
            visibility: hidden;
            opacity: 0;
            width: 20px;
            height: 20px;
            background: $dial-delete-background;
            background-color: white;
            border-radius: 18px;
            box-shadow: 0px 2px 3px -1px get-color-black-opacity(0.18);
            border: 0px;
            cursor: pointer;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            transition: opacity 300ms linear 0.2s;
        }

        .plus-dial-icon {
            border: 0;
            cursor: pointer;
            opacity: $dial-button-plus-opacity;
            margin-top: 10px;
            border-radius: 4px;
            width: $logo-size;
            height: $logo-size;
            background: $dial-button-plus-background;
            background-size: cover;

            &:hover {
                opacity: $dial-button-plus-opacity-hover;
            }
        }

        .placeholder {
            background-color: $dial-empty-bg-color;
            box-shadow: none;
            height: $logo-size;
            width: $logo-size;
            padding: $logo-padding;
            box-sizing: border-box;
            margin: 0 auto;
            border-radius: 4px;
        }

        .with-animation {
            opacity: 0;
            animation: fadeIn .5s forwards;
            animation-delay: .1s;
            transition: opacity .3s ease-in;
        }

        .dial-plus {
            padding: 0;
            height: calc(#{$dial-height} + 8px);
            display: flex;
            justify-content:center;
        }

        .error {
            text-align: center;
            color: #fff;
            background: $color-red;
            border-radius: 3px;
            margin-top: 5px;
            padding: 2px 4px;
            font-size: 11px;
            line-height: 12px;
        }

        .dial:hover {
            .edit{
                visibility: visible;
                opacity: 1;
                transition: visibility 0s linear 0s, opacity 300ms;
            }

            .delete {
                visibility: visible;
                opacity: 1;
                transition: visibility 0s linear 0.7s, opacity 300ms linear 0.7s;
            }

            .logo {
                box-shadow: $dial-logo-box-shadow-hover;
            }

            .title {
                color: $dial-title-color-hover;
                text-decoration: none;
            }
        }

        .dial:focus {
            .logo {
                border: 3px solid white;
                padding-block-start: 8px;

                &::after {
                    opacity: 0;
                }
            }
        }
    }
}
