.dy-table { // dy-table
    font-size: $font;

    .dy-table__more {  // dy-table__more
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        border: 1px solid $lineColor;
        border-top: 0;
        line-height: 48px;
        text-align: center;
        color: $fontSubColor;
        background: $backgroundLighterColor;
        cursor: pointer;

        .dy-icon-down {
            margin-right: 10px;
            font-size: 14px;
            transform: rotate(0deg);
            transition: .3s ease transform;
        }

        .icon-up {
            transform: rotate(180deg);
            transition: .3s ease transform;
        }
    }

    .dy-table__empty {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        border: 1px solid $lineColor;
        border-top: 0;
        line-height: 48px;
        text-align: center;
        color: $fontSubColor;
    }

    .dy-table__container { // dy-table__container
        overflow: hidden;

        table {
            display: inline-table;
            table-layout: fixed;
            border-collapse: collapse;
            width: 100%;
            max-width: 100%;
            margin: 0;

            td {
                padding: 16px;
                border: 1px solid $lineLightColor;
                vertical-align: middle;
            }

            .td--ellipsis {
                .dy-table-td-wrapper {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .dy-table-td-wrapper {
                font-size: 14px;
                overflow-wrap: break-word;
            }

            tr {
                background: $FFF;
            }
        }

        .dy-table--center {
            text-align: center;

            .dy-table--common__header {
                th {
                    text-align: center;
                }

                span {
                    flex: auto;
                }
            }
        }
    }

    .dy-table--hidden {
        overflow: hidden;
    }

    .dy-table--common { // dy-table--common
        .dy-table--common__header {  // dy-table--common__header
            background: $backgroundLighterColor;

            th {
                min-width: 80px;
                padding: 17px 20px;
                border: 1px solid $lineLightColor;
                border-bottom: 0;
                font-weight: 500;
                font-size: 14px;
                text-align: left;
                background: $backgroundLighterColor;

                & > div {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    .dy-sort-icon { // dy-sort-icon
        display: flex;
        flex-direction: column;
        margin-left: 8px;

        .dy-sort-icon__box {  // dy-sort-icon__box
            width: 0;
            height: 0;
            border: 5px solid transparent;
            cursor: pointer;
        }

        .dy-sort-icon--asc {  // dy-sort-icon--asc
            margin-bottom: 2px;
            border-bottom: 5px solid;
        }

        .is-asc-active { // is-asc-active
            border-bottom: 5px solid $themeColor;
        }

        .dy-sort-icon--desc {  // dy-sort-icon--dasc
            border-top: 5px solid;
        }

        .is-dasc-active { // is-dasc-active
            border-top: 5px solid $themeColor;
        }
    }

    .dy-table__tbody {
        &.common-table-body {
            tr:not(.more-box):hover {
                background: #f5f7fa;
            }
        }

        &.dy-table__tbody--stripe {  // dy-table__tbody--stripe
            tr:nth-child(2n):not(.more-box) {
                background: #f5f7fa;
            }
        }  // dy-table__tbody
    }

    &.dy-table--horizontal {  // dy-table--horizontal
        tr:not(.more-box) {
            td:nth-child(2n + 1) {
                background: $backgroundLighterColor;
            }
        }
    }

    .dy-table-header--scroll {
        width: calc(100% - 5px);
    }
}