@import "../variables.scss";
@import "../mixin/arrow.scss";

.table {
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    color: rgba(0, 0, 0, .9);
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: $white;
    border-radius: 2px;

    thead {
        tr {
            height: 56px;
            line-height: 56px;
            vertical-align: middle;
            border-bottom: 1px solid $gray;

            th {
                white-space: nowrap;
                min-width: 120px;
                padding: 0 15px;
                color: rgba(0, 0, 0, .54);
                user-select: none;

                div {
                    margin: 0 auto;
                }

                .sort-click-area {
                    &.enabled-click {
                        cursor: pointer;
                    }
                }

                .filter-area,
                .sort-area {
                    display: inline-block;
                    position: relative;
                    top: 2px;
                    left: 2px;
                    width: 12px;
                    height: 12px;

                    .sort-icon {
                        @include genArrow("right", 6px, $gray);

                        &-up {
                            @include genArrow("up", 6px, $primary);

                            position: relative;
                            top: -3px;
                            left: -3px;
                        }

                        &-down {
                            @include genArrow("down", 6px, $primary);

                            position: relative;
                            top: 3px;
                            left: -3px;
                        }
                    }
                }
            }
        }
    }

    tbody {
        tr {
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            transition: background .3s cubic-bezier(.25, .8, .5, 1);
            will-change: backgaound;

            &.selected {
                background-color: lighten($primary-lighter, 10);
            }

            td {
                min-width: 120px;
                padding: 0;
                line-height: normal;

                .extend {
                    cursor: pointer;
                }
            }
        }

        .hover-row {
            background-color: $gray-lighter;
        }
    }

    .select-area {
        min-width: 15px;

        label {
            margin: -20px;
            padding: 20px;
            cursor: pointer;

            input[type=checkbox] {
                outline: none;
                cursor: pointer;
            }
        }
    }

    .extend-area {
        min-width: 15px;
        display: inline-block;
    }
}