@import 'commons';
@import './../responsive-table-commons';

$m-sort-icon-size: 14px;

@mixin m-table-sort-icon-select() {
    opacity: 1 !important;

    &.m--is-sort-desc {
        transform: rotate(180deg);
    }
}

.m-table-head {
    &__sort-icon {
        &.m-table-head__sort-icon {
            stroke-width: 3;
            transition: transform $m-transition-duration ease, opacity $m-transition-duration ease, color $m-transition-duration ease;
            position: absolute;
            right: calc((#{$m-sort-icon-size} + #{$m-space-2xs}) * -1);
            z-index: 0;
            opacity: 0;

            &:focus {
                color: $m-color-text;
                opacity: 1;
            }
        }
    }

    &__title {
        position: relative;
        z-index: 1;

        + .m-table-head__sort-icon {
            margin-left: $m-space-2xs;
        }
    }

    &__cell {
        display: flex;
        align-items: center;
    }

    &__cell-content {
        transition: color $m-transition-duration ease;
        position: relative;
        display: flex;
        align-items: center;
    }

    th {
        font-size: inherit;
        font-weight: $m-font-weight-bold;

        @include m-table--cell-alignment(true);

        &.m--is-sortable {
            &:first-child {
                &.m--is-text-align-center {
                    padding-left: calc(#{$m-sort-icon-size} + #{$m-space-2xs} + #{$m-space});
                }
            }

            &:last-child {
                padding-right: calc(#{$m-sort-icon-size} + #{$m-space-2xs} + #{$m-space});
            }

            &:not(:first-child) {
                &.m--is-text-align-center {
                    padding-left: calc(#{$m-sort-icon-size} + #{$m-space-2xs} + #{$m-space-xs});
                }
            }

            &:not(:last-child) {
                padding-right: calc(#{$m-sort-icon-size} + #{$m-space-2xs} + #{$m-space-xs});
            }
        }

        &.m--is-initial-sort {
            .m-table-head__sort-icon {
                transition: transform 0s, opacity $m-transition-duration ease;
            }
        }

        &.m--is-sorted {
            .m-table-head__sort-icon {
                @include m-table-sort-icon-select();
            }
        }

        &:not(.m--is-disabled) {
            .m-table-head__cell-content:hover {
                cursor: pointer;

                .m-table-head__sort-icon {
                    color: $m-color-grey;
                    opacity: 1;
                }
            }
        }
    }

    &.m--is-first-column-fixed {
        th:first-child {
            @include m-table--sticky-cell();

            &::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
            }
        }
    }
}

@mixin head-style-dark() {
    th {
        margin: 0;
        padding: $m-space;
        background: $m-color-grey-darkest;
    }

    &.m--is-first-column-fixed {
        th:first-child::after {
            right: -$m-table--largeur-degrade;
            width: $m-table--largeur-degrade;
            background: linear-gradient(to right, $m-color-grey-darkest, rgba(0, 0, 0, 0));
        }
    }

    &:not(.m--has-multiple-head-row) th,
    &.m--has-multiple-head-row tr:first-child th {
        color: $m-color-white;

        &.m--is-sortable:not(.m--is-disabled) {
            .m-table-head__cell-content:hover {
                color: $m-color-grey-light;
            }
        }
    }

    &.m--has-multiple-head-row {
        tr {
            &:not(:first-child) {
                th {
                    background: #e4e4e4;
                }
            }

            &:not(:first-child):not(:last-child) th {
                border-bottom-width: 2px;
                border-bottom-style: solid;
            }

        }

        th {
            border-color: $m-color-white;

            &:not(:last-child) {
                border-right-width: 2px;
                border-right-style: solid;
            }
        }
    }

    &:not(.m--has-multiple-head-row) th,
    &.m--has-multiple-head-row tr:first-child th {
        color: $m-color-white;

        &.m--is-sortable:not(.m--is-waiting) {
            .m-table-head__cell-content:hover {
                color: $m-color-grey-light;
            }
        }
    }

    &.m--has-multiple-head-row {
        tr {
            &:not(:first-child) {
                th {
                    background: #e4e4e4;
                }
            }

            &:not(:first-child):not(:last-child) th {
                border-bottom-width: 2px;
                border-bottom-style: solid;
            }

        }

        th {
            border-color: $m-color-white;

            &:not(:last-child) {
                border-right-width: 2px;
                border-right-style: solid;
            }
        }

    }
}

@mixin head-style-light() {
    th {
        margin: 0;
        padding: $m-space;
        background: #f0f0f0;
        color: $m-color-grey-darker;

        &.m--is-sortable:not(.m--is-disabled) {
            .m-table-head__cell-content:hover {
                color: $m-color-grey-dark;
            }
        }
    }

    &.m--is-first-column-fixed {
        th:first-child::after {
            right: -$m-table--largeur-degrade;
            width: $m-table--largeur-degrade;
            background: linear-gradient(to right, $m-color-grey-light, rgba(255, 255, 255, 0));
        }
    }

    &.m--has-multiple-head-row {
        tr {
            &:first-child {
                th {
                    background: #e4e4e4;
                }
            }

            &:not(:first-child):not(:last-child) th {
                border-bottom-width: 2px;
                border-bottom-style: solid;
            }

        }

        th {
            border-color: $m-color-white;

            &:not(:last-child) {
                border-right-width: 2px;
                border-right-style: solid;
            }
        }
    }
}

@mixin head-style-lightest() {
    border-bottom: 3px solid $m-color-border;

    th {
        margin: 0;
        padding: 0 $m-space $m-space $m-space;
        background: rgba(255, 255, 255, 0);
        color: $m-color-text;

        &.m--is-sortable:not(.m--is-disabled) {
            .m-table-head__cell-content:hover {
                color: $m-color-grey-dark;
            }
        }
    }

    &.m--is-first-column-fixed {
        th {
            background: $m-color-white;

            &:first-child::after {
                right: -$m-table--largeur-degrade;
                width: $m-table--largeur-degrade;
                background: linear-gradient(to right, $m-color-white, rgba(255, 255, 255, 0));
            }
        }
    }
}

.m-table-head.m--is-head-style-dark {
    @include head-style-dark();
}

.m-table-head.m--is-head-style-light {
    @include head-style-light();
}

.m-table-head.m--is-head-style-lightest {
    @include head-style-lightest();
}