
//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    //
    //  Blank style
    //  ---------------------------------------------
    .product.data.items {
        .lib-data-accordion();
        margin-bottom: @indent__base;
    }

    //
    //  Luma style
    //  ---------------------------------------------
    .data-tabs-accordion-style-luma() {
        // Only bottom border
        .lib-data-accordion(
            @_accordion-control-font-family: false,
            @_accordion-control-font-size: 1.6rem,
            @_accordion-control-font-style: false,
            @_accordion-control-font-weight: normal,
            @_accordion-control-border-top: transparent,
            @_accordion-control-border-right: transparent,
            @_accordion-control-border-left: transparent,
            @_accordion-control-background-color: transparent,
            @_accordion-control-color: @primary__color,
            @_accordion-control-background-color-hover: transparent,
            @_accordion-control-color-hover: @primary__color,
            @_accordion-control-background-color-active: transparent,
            @_accordion-control-color-active: @primary__color,
            @_accordion-control-color-visited: false,
            @_accordion-control-text-decoration-visited: false,
            @_accordion-control-margin-bottom: 0,
            @_accordion-control-padding-right: 35px,
            @_accordion-control-padding-left: @indent__s,
            @_accordion-content-border: transparent,
            @_accordion-content-margin: 0,
            @_accordion-content-padding: @indent__s @indent__s @indent__l
        );
        // border-bottom: @tab-control__border-width solid @tab-control__border-color;
        margin-bottom: @indent__base;
        // margin-left: -@layout__width-xs-indent;
        // margin-right: -@layout__width-xs-indent;
        .item.title {
            a {
                position: relative;
                .lib-icon-font(
                    @_icon-font-content: @icon-down,
                    @_icon-font-size: 36px,
                    @_icon-font-line-height: @icon-font__line-height,
                    @_icon-font-color: @icon-font__color,
                    @_icon-font-color-hover: @icon-font__color-hover,
                    @_icon-font-color-active: @icon-font__color-active,
                    @_icon-font-margin: @icon-font__margin,
                    @_icon-font-vertical-align: @icon-font__vertical-align,
                    @_icon-font-position: after,
                    @_icon-font-display: false
                );
                &:after {
                    position: absolute;
                    right: 5px;
                    top: 5px;
                }
            }
            &.active a:after {
                content: @icon-up;
            }
            > .switch {
                //&:extend(.abs-global-border-color all);
            }
        }
        > .item.content {
            &:last-child {
                // Add bottom border to the last panel
                border-bottom: @tab-control__border-width solid @tab-control__border-color;
                //&:extend(.abs-global-border-color all);
            }
        }
        .value p:last-child {
            margin-bottom: 0;
        }
        .table-wrapper {
            margin: 0;
        }
    }

    .product.data.items.style-luma {
        .data-tabs-accordion-style-luma();
    }

    //
    //  Style 1
    //  ---------------------------------------------
    .product.data.items.style1 {
        .data-tabs-accordion-style-luma();
    }

    //
    //  Style 1 small (modification of Style 1)
    //  ---------------------------------------------
    .product.data.items.style1.style1-small {
        > .item.title {
            > .switch {
                font-size: 1.4rem;
                height: auto; // Override parent style's height
                line-height: 18px;
                padding-top: 9px;
                padding-right: 35px; // Additional space for icon
                padding-bottom: 9px;
            }
            a {
                &:after {
                    right: 0;
                    top: 9px; // The same value as top padding of an item
                }
            }
            &:not(.disabled) > .switch:active,
            &.active > .switch,
            &.active > .switch:focus,
            &.active > .switch:hover {
                // Override default bottom padding (inherited from Style 1) for all types of switch
                padding-bottom: 9px;
            }
        }
    }

}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .product.data.items {
        .lib-data-tabs(
            @_tab-content-border-top-status: true,
            @_tab-control-color-visited: false,
            @_tab-control-text-decoration-visited: false
        );
    }

    //
    //  Luma style
    //  ---------------------------------------------
    .product.data.items.style-luma {
        // We need to insert tabs variables which Luma theme overrides.
        // @_tab-content-margin-top = @_tab-control-height + @_tab-control-border-width + @_tab-control-padding-top + @_tab-control-padding-bottom
        .lib-data-tabs(
            @_tab-control-font-weight: @font-weight__regular,
            @_tab-content-margin-top: 43px,
            @_tab-control-height: 40px,
            @_tab-control-line-height: 40px,
            @_tab-control-margin-right: -1px,
            @_tab-control-border-width: 1px,
            @_tab-control-padding-top: 1px,
            @_tab-control-padding-right: 35px,
            @_tab-control-padding-bottom: 1px,
            @_tab-control-padding-left: 35px,
            @_tab-content-padding-top: 35px,
            @_tab-content-padding-right: 35px,
            @_tab-content-padding-bottom: 35px,
            @_tab-content-padding-left: 35px,
            @_tab-control-color-visited: false,
            @_tab-control-text-decoration-visited: false
        );
        border-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        .item.title a:after {
            display: none;
        }
        > .item.title {
            &:not(.disabled) > .switch:active {
                // It is required to override (and decrease) default bottom padding of pressed tab
                padding-bottom: 1px;
            }
        }
        > .item.content {
            &:last-child {
                // Remove bottom border from the last panel (which was added for accordion)
                border-bottom: none;
            }
        }
    }

    //
    //  Style 1
    //  ---------------------------------------------
    .product.data.items.style1 {
        // @_tab-content-border-top-status set to "true" adds top border to the content panels
        // @_tab-content-margin-top = @_tab-control-height + @_tab-control-border-width + @_tab-control-padding-top + @_tab-control-padding-bottom
        // In this case tabs have transparent border so we need to increase @_tab-content-margin-top by one (despite that @_tab-control-border-width = 0)
        .lib-data-tabs(
            @_tab-content-border-top-status: true,
            @_tab-control-font-weight: @font-weight__regular,
            @_tab-control-font-size: 16px,
            @_tab-content-margin-top: 51px,
            @_tab-control-height: 50px,
            @_tab-control-line-height: 50px,
            @_tab-control-margin-right: 0,
            @_tab-control-border-width: 0,
            @_tab-control-padding-top: 0,
            @_tab-control-padding-right: 10px,
            @_tab-control-padding-bottom: 0,
            @_tab-control-padding-left: 10px,
            @_tab-content-padding-top: 15px,
            @_tab-content-padding-right: 0,
            @_tab-content-padding-bottom: 15px,
            @_tab-content-padding-left: 0,
            @_tab-control-color-visited: false,
            @_tab-control-text-decoration-visited: false
        );
        .item.title a:after {
            display: none;
        }
        > .item.title {
            > .switch {
                border: 1px solid transparent;
                border-bottom: none;
            }
            &:not(.disabled) > .switch:active {
                padding-bottom: 0px;
            }
            &.active > .switch,
            &.active > .switch:focus,
            &.active > .switch:hover {
                // Border of the active item has the same color as border of panels. Bottom border is transparent.
                border-color: @tab-control__border-color;
                border-bottom: 1px solid transparent;
                // Make it a little bit taller than other tabs
                padding-top: 4px;
                margin-top: -4px;
            }
        }
        > .item.content {
            &:last-child {
                // Remove bottom border from the last panel (which was added for accordion)
                border-bottom: none;
            }
        }
    }

    //
    //  Style 1 small (modification of Style 1)
    //  ---------------------------------------------
    .product.data.items.style1.style1-small {
        > .item.title {
            > .switch {
                font-size: 14px;
                height: 32px;
                line-height: 32px;
                padding-top: 0;
                padding-left: 7px;
                padding-right: 7px;
                padding-bottom: 0;
            }
            &:not(.disabled) > .switch:active {
                padding-bottom: 0px;
            }
            &.active > .switch,
            &.active > .switch:focus,
            &.active > .switch:hover {
                // Make it a little bit taller than other tabs
                padding-top: 4px;
                margin-top: -4px;

                // Override bottom padding of mobile version
                padding-bottom: 0;
            }
        }
        > .item.content {
            margin-top: 33px;
        }
    }

}
