.icon-button {
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--icon-button__color);
    background-color: transparent;
    border: none;
    border-radius: 50%;
    font-size: 1em;
    flex-shrink: 0;
    transition: width 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.icon-button:hover {
    color: var(--icon-button__color-hover);
    background-color: color-mix(in srgb, var(--icon-button__color-hover), transparent 80%);
}

.icon-button--negative {
    --icon-button__color-hover: var(--color-negative);
}

.icon-button--positive {
    --icon-button__color-hover: var(--color-positive);
}


.login-panel {
    background-color: var(--color-background);
    color: var(--color-text);
    border-radius: 1em;
    box-sizing: border-box;
    height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--size-xxs);
    width: 2em;
    transition: width 0.2s ease-in-out;
}

.login-panel .login-panel__open-button {
    width: 1.5em;
    flex-shrink: 0;
}


.login-panel--opened {
    width: 20em;
    max-width: calc(100vw - 8em);
}

.login-panel:not(.login-panel--opened) .login-form .icon-button {
    width: 0;
}

.login-panel--opened .login-form {
    width: 100%;
}

.login-panel--opened .login-panel__open-button {
    width: 0;
}

.login-form {
    width: 100%;
    flex-shrink: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.login-input {
    display: inline-block;
    background-color: #EEE;
    box-sizing: border-box;
    font-size: 1em;
    font-family: inherit;
    border: none;
    padding: 0 0.75em;
    border-radius: 1em;
    margin-right: var(--size-xxs);
    color: var(--color-text);
    width: 100%;
    height: 1.5em;
    flex: 1 1 auto;
    min-width: 0;
}
.login-input:focus {
    outline: none;
}

.player-panel {
    background-color: var(--color-background);
    color: var(--color-text);
    border-radius: 1em;
    height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100vw - 12em);
    padding-left: var(--size-s);
    padding-right: var(--size-xxs);
}

.player-panel__label {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--size-xxs) 0;
}