//------------------//
// Magsparrow - Lib //
//------------------//
// This library is required for all styles.
// Do not remove this.
$magsparrow-render-styles: false;
@import '../../../web/css/magsparrow-lib';
//------------------//

//  Variables
//  _____________________________________________

$gift-message-field-label__color: $gray-65;
$gift-item-block__border-color: $gray-2;
$gift-item-block__border-width: 1px;

//
//  Common
//  _____________________________________________


.gift-message {
    .field {
        .label {
            color: $gift-message-field-label__color;
        }
    }
}

.gift-options {
    @include clearfix();

    .actions-toolbar {
        .action-cancel {
            display: none;
        }
    }
}

.gift-options-title {
    margin: 0 0 $indent-base;
}

.gift-options-content {
    .fieldset {
        margin: 0 0 $indent-base;
    }
}
.gift-summary {
    .actions-toolbar {
        > .secondary {
            float: none;
            .action {
                margin: $indent-s $indent-base 0 0;
            }
        }
    }
}

//
//  In-table block
//  ---------------------------------------------

.cart.table-wrapper {
    .gift-content {
        clear: left;
        display: none;
        float: left;
        margin-right: -100%;
        margin: $indent-base 0;
        text-align: left;
        width: 100%;
        &._active {
            display: table;
            table-layout: fixed;
        }
    }

    .action-gift {
        // @toDo icon - @icon-down

        &._active {
            // @toDo icon - @icon-up
        }
    }
}

//
//  Collapsible block
//  ---------------------------------------------

.gift-item-block {
    margin: 0;
    &._active {
        .title {
            // @toDo icon - @icon-up
        }
    }

    .title {
        border-radius: 3px;
        @include lib-button-style('beta');

        &:active {


        }
    }

    .content {
        @include clearfix();
        border-bottom: $gift-item-block__border-width solid $gift-item-block__border-color;
        padding: $indent-s $indent-s $indent-base;
        position: relative;
    }
}

//
//  Account order gift message
//  ---------------------------------------------

.order-details-items {
    .order-gift-message,
    .block-order-details-gift-message {
        @include clearfix();

        .item-options {
            dt {
                margin: $indent-s 0;
            }
        }

        dt {
            &:after {
                content: '';
            }
        }
        .label {
            &:after {
                content: ': ';
            }
        }
        .item-message {
            clear: left;
        }
    }
}

.order-details-items .order-items {
    .order-gift-message {
        &:not(.expanded-content) {
            @include clearfix();
        }
        .action.close {
            display: none;
        }
    }
    .action.show {
        // @toDo icon - @icon-down
        padding-right: $indent-base;
        position: relative;
        &:after {
            position: absolute;
            right: 0;
            top: -4px;
        }
        &.expanded {
            // @toDo icon - @icon-up
        }
    }
}

.block-order-details-gift-message {
    border-top: $border-width-base solid $border-color-base;
    padding-top: $indent-s;
}

//
//  Mobile
//  _____________________________________________

@include respond-to('lib-tweakpoints-small-range') {
    .gift-options {
        .actions-toolbar {
            .action-update {
                padding: 15px;
                width: 100%;
            }
        }
    }
    .gift-item-block {
        border-bottom: 0;
        border-top: $gift-item-block__border-width solid $gift-item-block__border-color;
    }
    .cart.table-wrapper {
        .gift-content {
            margin-right: -$indent-s;
        }
    }

    .cart.table-wrapper {
        .gift-content {
            border-bottom: $border-width-base solid $border-color-base;
            margin-bottom: $indent-base;
        }
    }
}

//
//  Desktop
//  _____________________________________________

@include respond-to('medium') {

    .gift-message {
        .field {
            @include clearfix();
            @include lib-form-field-column();
        }
    }
    .gift-options {
        position: relative;
        z-index: 1;
        .actions-toolbar {
            clear: both;
            float: right;
            position: static;
            .secondary {
                float: right;
                .action {
                    float: right;
                    margin-left: $indent-base;
                }
                .action-cancel {
                    display: block;
                    float: left;
                    margin-top: 6px;
                }
            }
            &:nth-child(3) {
                &:before {
                    border-left: 1px solid $gift-item-block__border-color;
                    bottom: 5rem;
                    content: "";
                    display: block;
                    left: 50%;
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    width: 0;
                }
            }
        }
    }
    .gift-options-title {
        @include responsive-text-size('gamma');
    }
    .gift-summary,
    .cart.table-wrapper .gift-summary {
        .actions-toolbar {
            margin-left: 0;
        }
    }
    .cart-container {
        .cart-gift-item {

            float: left;
            width: 73%;
            position: relative;
            .actions {
                text-align: right;
            }
            .action {
                &.continue {
                    float: left;
                }
                &.clear {
                    margin-right: $indent-s;
                }
            }
        }
    }

    //
    //  In-table block
    //  ---------------------------------------------

    .cart.table-wrapper {
        .action-gift {
            float: left;
        }
    }
}
