@import 'commons';

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

@mixin m-table-sortable-icon-select() {
    opacity: 1;

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

.m-table {
    position: relative;
    border-collapse: collapse;

    &.m--is-loading {
        thead {
            th {
                &.m--is-sortable {
                    .m-table__header-name {
                        cursor: default;
                    }
                }
            }
        }
    }

    &.m--is-row-highlighted-on-hover {
        tbody {
            tr {
                transition: background $m-transition-duration ease;
            }

            tr:hover:not(.m-table__message):not(.m-table__loading) {
                background-color: $m-color-interactive-lightest;
            }
        }
    }

    thead {
        text-align: left;

        tr {
            background-color: #F3F3F3;
        }

        th {
            color: $m-color-text;
            font-weight: $m-font-weight-semi-bold;

            &.m--is-sortable {
                transition: color $m-transition-duration ease;
                cursor: pointer;

                &:hover {
                    color: $m-color-grey-dark;

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

                &.m--is-sorted {
                    color: $m-color-grey-darker;

                    .m-table__sortable-icon {
                        color: $m-color-grey-darker;

                        @include m-table-sortable-icon-select();
                    }
                }

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

            &.m--is-text-align-center {
                text-align: center;

                .m-table__header-wrap {
                    justify-content: center;
                }
            }

            &.m--is-text-align-left {
                text-align: left;

                .m-table__header-wrap {
                    justify-content: flex-start;
                }
            }

            &.m--is-text-align-right {
                text-align: right;

                .m-table__header-wrap {
                    justify-content: flex-end;
                }
            }
        }
    }

    tbody {
        color: $m-color-grey-darker;
    }

    th,
    td {
        box-sizing: content-box;
        padding-top: $m-space;
        padding-bottom: $m-space;

        &:first-child {
            padding-left: $m-space;
        }

        &:last-child {
            padding-right: $m-space;
        }

        &:not(:first-child) {
            padding-left: $m-space-xs;
        }

        &:not(:last-child) {
            padding-right: $m-space-xs;
        }

        &.m--is-text-align-center {
            text-align: center;

            > * {
                text-align: center;
            }
        }

        &.m--is-text-align-left {
            text-align: left;

            > * {
                text-align: left;
            }
        }

        &.m--is-text-align-right {
            text-align: right;

            > * {
                text-align: right;
            }
        }
    }

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

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

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

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

    td {
        &:last-child {
            &.m--is-sortable.m--is-text-align-right {
                padding-right: calc(#{$m-sortable-icon-size} + #{$m-space-2xs} + #{$m-space});
            }
        }

        &:not(:last-child) {
            &.m--is-sortable.m--is-text-align-right {
                padding-right: calc(#{$m-sortable-icon-size} + #{$m-space-2xs} + #{$m-space-xs});
            }
        }
    }

    &__header-wrap {
        display: flex;
        align-items: center;
    }

    &__sortable-icon-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    &__header-name {
        position: relative;
        z-index: 1;
    }

    .m-table__sortable-icon {
        transition: transform $m-transition-duration ease, opacity $m-transition-duration ease;
        position: absolute;
        right: calc((#{$m-sortable-icon-size} + #{$m-space-2xs}) * -1);
        z-index: 0;
        opacity: 0;

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

    &__loading.m-table__loading > td {
        padding: 0;
        height: auto;
    }

    &__placeholder,
    &__placeholder-container {
        height: 260px;
    }

    &__placeholder-container {
        position: sticky;
        right: 0;
        left: 0;
        background-color: $m-color-grey-lightest;

        &.m-table__placeholder-container {
            .m-table & {
                box-sizing: border-box;
                padding: 0;
            }
        }
    }

    &__placeholder-message {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: $m-space;
        min-width: 200px;
        color: $m-color-grey;
        font-weight: $m-font-weight-semi-bold;
        @include m-font-size('md');
        text-align: center;

        > :first-child {
            margin-top: 0;
        }
    }

    &__placeholder-precision {
        margin: $m-space-2xs 0 0 0;
        @include m-font-size();
        font-weight: $m-font-weight-light;
    }
}

.m-table.m--is-skin-regular {
    tbody {
        tr {
            &:nth-child(even) {
                background-color: $m-color-grey-lightest;
            }
        }
    }
}

.m-table.m--is-skin-simple {
    tbody {
        tr:not(:first-child) {
            border-top: 1px solid $m-color-grey-lighter;
        }
    }
}