/**
 * Copyright Â© 2021 O2TI. All rights reserved.
 * @author    Bruno Elisei <brunoelisei@o2ti.com>
 * See LICENSE.txt for license details.
 */

//
//  Margin for forms
//  ---------------------------------------------

@abs-margin-for-forms-desktop: {
    .lib-css(margin-left, 0);
};

& when (@media-common = true) {
    .abs-theme-full-checkout-title-sessions {
        .lib-heading(h2);
        .lib-css(border-bottom, @theme-full-checkout-step-title__border);

        margin-bottom: @indent__base + @indent__xs;
        margin-top: unset;
        padding-bottom: unset;
    }

    .abs-theme-full-checkout-title-session-payment-desktop-margin {
        margin-bottom: @indent__s + @indent__xs;
        margin-left: unset;
        margin-right: unset;
    }

    .abs-theme-full-checkout-sub-title-methods {
        .lib-font-size(1.6rem);
        .lib-css(border-bottom, unset);
        .lib-css(border-top, @theme-full-checkout__border);

        margin-bottom: unset;
        margin-top: unset;
        padding-left: @indent__base;
        padding-right: @indent__base;
    }

    .abs-theme-full-checkout-sub-title-sessions {
        .lib-font-size(1.6rem);
        .lib-css(border-top, @theme-full-checkout__border);

        margin-bottom: unset;
        margin-top: unset;
    }

    .abs-theme-full-checkout-sub-title-sessions-border-bottom {
        .lib-heading(h3);
        .lib-css(border-bottom, @theme-full-checkout__border);

        margin-bottom: @indent__s + @indent__xs;
        margin-left: unset;
        margin-top: @indent__s + @indent__xs;
    }

    .abs-theme-full-checkout-title-collapsible {
        > .title {
            
            .lib-css(padding, @indent__s @indent__xl @indent__s 0);

            .lib-icon-font(@theme-full-checkout-collapsible-icon__down, @_icon-font-size: @theme-full-checkout-collapsible-icon__font-size, @_icon-font-line-height: @theme-full-checkout-collapsible-icon__line-height, @_icon-font-text-hide: @theme-full-checkout-collapsible-icon__text-hide, @_icon-font-margin: @theme-full-checkout-collapsible-icon__margin, @_icon-font-position: @theme-full-checkout-collapsible-icon__position, @_icon-font-display: @theme-full-checkout-collapsible-icon__display);

            border-bottom: @border-width__base solid @border-color__base;
            cursor: pointer;
            margin-bottom: 0;
            position: relative;

            &::after {
                position: absolute;
                top: @indent__s;
                right: 0;
            }

            strong {
                .lib-font-size(18);

                font-weight: @font-weight__light;
                margin: 0;
            }
        }

        &.active {
            > .title {
                .lib-icon-font-symbol(@_icon-font-content: @theme-full-checkout-collapsible-icon__up, @_icon-font-position: @theme-full-checkout-collapsible-icon__position);
            }
        }
    }

    .abs-theme-full-checkout-discount-code {
        display: table;
        width: 100%;
        .lib-css(margin-bottom, @indent__base);
        .lib-css(margin-top, @indent__base);

        .description-of-use {
            .lib-css(margin-bottom, @indent__base);
            display: table-caption;
        }

        .theme-full-checkout-form-discount-inner {
            display: table-cell;

            > .field {
                padding-left: 0;
                padding-right: 0;

                > .label {
                    display: none;
                }
            }
        }

        .actions-toolbar {
            display: table-cell;
            vertical-align: top;
            width: 1%;

            .primary {
                float: left;

                .action {
                    &:extend(.abs-revert-to-action-secondary all);
                    border-bottom-left-radius: 0;
                    border-top-left-radius: 0;
                    border-width: 1px;
                    margin: 0;
                    white-space: nowrap;
                    width: auto;
                }
            }
        }
    }

    @keyframes swing {
        15% {
            transform: translateX(5px);
            transform: translateX(5px);
        }

        30% {
            transform: translateX(-5px);
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(3px);
            transform: translateX(3px);
        }

        65% {
            transform: translateX(-3px);
            transform: translateX(-3px);
        }

        80% {
            transform: translateX(2px);
            transform: translateX(2px);
        }

        100% {
            transform: translateX(0);
            transform: translateX(0);
        }
    }
}
