:host {
    box-sizing: border-box;
    padding: 16px;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: #fafbfc;
}

.in {
    color: #586069;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important;;
}

.icon-button {
    border-radius: 8px;
    cursor: pointer;
    padding: 16px;
    margin: 16px;
    &>svg{
        height: 72px;
        width: 72px;
    }

    color: #aabaca;

    transition: color 0.5s ease, background-color 0.5s ease;

    &.selected {
        color: white;
        background-color: #aabaca;
    }

    &:hover{
        color: var(--primary-color);
        background-color: #eaebec;
    }

    &.bilibili {
        --primary-color: #00a1d6;
    }

    &.acfun {
        --primary-color:  #FD4C5D;
    }
}

#cover {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &>#platforms {
        display: flex;
    }

    .generate-link {
        cursor: pointer;
        border-radius: 5px;
        padding: 10px 16px;
        color: #555;
        border: 1px #cccccc solid;
        font-variant-ligatures: none;
        font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
        letter-spacing: 0px;
        display: inline-block;
        width: 400px;
        line-height: 24px;
        transition: background-color 0.5s ease;
        user-select: none;
        

        &:hover {
            background-color: #eaebec;
        }
    }
}