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

.device-container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--box-color);
    box-shadow: var(--shadow);
    border-radius: 15px;
    height: 250px;

    &:hover .bottom-section {
        div:nth-of-type(1),
        div:nth-of-type(3) {
            opacity: 1;
        }
    }

    .top-section {
        display: flex;
        position: relative;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 10px;
        height: 90%;

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

            span {
                font-size: 60px;
                color: var(--icon);
                margin-bottom: 10px;
            }
        }

        .device-data {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
    }

    .bottom-section {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-of-type(1) {
            text-align: left;
            padding-right: 5px;

            p {
                margin: 0;
            }

            .device-title {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 5px;
            }

            .device-type {
                font-size: 13px;
            }
        }

        div:nth-of-type(2) {
            transition: 0.3s;
            color: var(--icon);

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