@import "../../../../../assets/styles/variables.scss";

.tower-center-container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--box-color);
    box-shadow: var(--shadow);
    border-radius: 15px;
    height: 240px;
    width: 240px;
    transition: .3s;
    box-sizing: border-box;

    &:hover {
        box-shadow: var(--shadow-active-green);
        color: $at-green-active;
        cursor: pointer;

        .top-section .tower-icon .material-symbols-outlined {
            color: $at-green-active;
        }
    }

    .top-section {
        height: 100%;
        position: relative;

        .tower-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;

            .material-symbols-outlined {
                font-size: 70px;
                color: var(--icon);
                transition: .3s;
                margin-bottom: 10px;
            }

            .tower-name {
                max-width: 160px;
                text-align: center;
                word-wrap: break-word;
            }

            .field-container {
                width: 300px;
                padding: 0;
                
                input {
                    border: none;
                    border-bottom: 1px solid var(--disabled-gray);
                    background-color: transparent;
                    text-align: center;
                    padding-bottom: 5px;
                    font-family: $at-font;
                    color: var(--text);

                    &:focus {
                        outline: none;
                        border: none;
                        border-bottom: 1px solid $at-green;
                    }

                    &::placeholder {
                        color: var(--icon);
                    }
                }
            }
        }

        .tower-icon-menu {
            position: absolute;
            top: 0;
            right: 0;
            color: var(--icon);
            z-index: 2;
            cursor: pointer;
            transition: .3s;

            &:hover {
                color: $at-green-active;
            }

        }
    }

    .bottom-section {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transition: .3s;
        border-radius: 0 0 15px 15px;
        padding: 20px 10px 8px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: 0.3s;
            color: $at-green;

            span {
                vertical-align: middle;
            }

            span:nth-of-type(2) {
                font-size: 10px;
            }

            &:hover {
                cursor: pointer;
            }
        }

        div:nth-of-type(3) {
            text-align: end;
        }

        .save-disable {
            color: var(--disabled-gray);
        }
    }
}

.green-add-button {
    background-color: $at-green;
    box-shadow: $at-green;
    cursor: pointer;

    &:hover {
        background-color: $at-green-active;

        .top-section .tower-icon .material-symbols-outlined {
            color: var(--box-color);
        }
    }

    .top-section {
        color: var(--box-color);

        .tower-icon .material-symbols-outlined {
            color: var(--box-color)
        }
    }
}

.tower-center-container-config {
    box-shadow: none;
    border: 6px dashed var(--box-color);
    background-color: var(--command-center-background);
    transition: .3s;

    &:hover {
        cursor: auto;
        box-shadow: none;

        .top-section {
            .tower-icon .material-symbols-outlined {
                color: var(--icon);
            } 
        }
    }

    .top-section {
        .tower-icon {
            .tower-icon-menu {
                background-color: red !important;
            }
    
            .tower-icon-trigger {
                position:  absolute;
                top: 20%;
                right: 30%;
                cursor: pointer;
        
                .material-symbols-outlined {
                    font-size: 32px;
                    transition: .3s;
                    color: var(--icon);
        
                    &:hover {
                        color: $at-green-active
                    }
                }
            }
        }
    }
}
