@use 'ngx-tethys/styles/mixins/shadow';
@use 'ngx-tethys/styles/variables.scss' as variables;
@use './variables.scss' as board;

.thy-board-header {
    display: flex;
    width: 100%;
    line-height: 48px;
    background: variables.$gray-80;

    .entries {
        position: relative;
        display: flex;
        .entry {
            display: flex;
            align-items: center;
            width: 320px;
            min-width: 320px;
            padding: 0 20px;
            overflow: hidden;
            border-top: solid 1px variables.$gray-200;
            border-left: solid 1px variables.$gray-200;
            border-bottom: solid 1px variables.$gray-200;
            color: variables.$gray-800;
            .operator {
                display: none;
                margin-right: -12px;
            }
            &:hover {
                .operator {
                    display: inherit;
                }
            }
            &:first-child {
                border-left: none;
            }
            &:last-child {
                border-right: solid 1px variables.$gray-200;
            }
            &.entry-split {
                width: 640px;
            }
        }

        .entry-collapsed {
            position: relative;
            width: 49px;
            min-width: 49px;
            line-height: 1.5715;
            border-right: none;

            .entry-collapsed-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 49px;
                border-top: solid 1px variables.$gray-200;
                border-left: board.$thy-board-border;
                background: variables.$gray-80;

                &:last-child {
                    border-right: solid 1px variables.$gray-200;
                }

                .title {
                    margin: 16px auto 0px auto;
                    max-height: 11rem;
                    writing-mode: tb;
                    width: 20px;
                    letter-spacing: 3px;
                }
                .count {
                    margin: 0px auto;
                }
                .operator {
                    margin: 0px auto;
                }
            }

            & + .entry {
                border-left: none;
            }

            & + .entry-collapsed .entry-collapsed-content {
                border-left: none;
            }
        }

        .entry-exceed-wip-limit {
            &:not(.entry-collapsed) {
                background: rgba($color: board.$thy-board-wip-limit-color, $alpha: 0.05);
                border: board.$thy-board-border-wip-limit;
            }

            &.entry-collapsed {
                background: variables.$gray-80;
                border-bottom: none;

                .entry-collapsed-content {
                    height: 100%;
                    background: rgba($color: board.$thy-board-wip-limit-color, $alpha: 0.05);
                    border: board.$thy-board-border-wip-limit;
                }
            }

            & + .entry {
                border-left: none;
            }

            & + .entry-collapsed .entry-collapsed-content {
                border-left: none;
            }
        }
    }

    .entry-header-empty-zone {
        flex: 1;
        border-top: solid 1px variables.$gray-200;
        border-bottom: solid 1px variables.$gray-200;
    }

    .board-setting {
        position: absolute;
        right: 0;
        top: 48px;
        width: 50px;
        color: variables.$gray-500;
        text-align: center;
        border-left: solid 1px variables.$gray-200;
        line-height: 48px;
        cursor: pointer;
        background: variables.$gray-80;
    }
}