@charset "UTF-8";

/* Fonte dos ícones */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(../fonts/Material_Symbols_Outlined/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf) format('truetype');
}

/* Estilo dos ícones */
.player .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

:root {
    --player-cor-background: white;
    --player-cor-background-hover: rgba(255, 255, 255, 0.1);
    --player-cor-border-hover: yellow;
    --player-cor-seekbar-point: black;
    --player-cor-seekbar-fill: black;
    --player-cor-seekbar-background: rgb(100, 100, 100);
    --player-cor-btn-background: white;
    --player-cor-btn-icon: black;
    --player-cor-btn-highlight: rgba(0, 0, 0, 0.15);
    --player-cor-btn-active-effect: #58a3ff80;
    --player-cor-btn-out-highlight: rgba(255, 255, 255, 0.2);
    --player-cor-btn-out-highlight-hidden: rgba(255, 255, 255, 0.3);
    --player-cor-btn-out-icon: white;
}

/* Div com o player */
.player {
    padding: 10px;
    border-radius: 10px;
}
.player:hover {
    background-color: var(--player-cor-background-hover);
}

/* Div com o contéudo do player */
.player .content-div {
    padding: 10px;
    vertical-align: top;
}

/* Player quando não está selecionado */
.player .hide {
    opacity: 10%;
}

/*  Div que marca os controles */
.player .div-controls {
    display: inline-block;
    width: 100%;
    min-width: 375px;
    max-width: 500px;
    vertical-align: middle;
    padding: 10px;
    background-color: var(--player-cor-background);
    border-radius: 10px;
}

/* Título do player */
.player .name {
    margin: 0px;
    font-size: 30px;
}

/* Botões dentro do player */
.player .btn {
    margin: 0px;
    padding: 6px;
    vertical-align: middle;
    color: var(--player-cor-btn-icon);
    background-color: var(--player-cor-btn-background);
    border: none;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.player .btn:hover {
    background-color: var(--player-cor-btn-highlight);
}

/* Span com o tempo do player */
.player .time {
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    vertical-align: middle;
    color: var(--player-cor-btn-icon);
}

/* Seekbar com o progresso */
.player .seekbar {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: var(--player-cor-seekbar-background);
    outline: none;
    cursor: pointer;
}
.player .seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background-color: var(--player-cor-seekbar-point);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.player .seekbar:hover::-webkit-slider-thumb {
    opacity: 1;
    visibility: visible;
}

/* Div com o botão e barra de volume */
.player .div-volume {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    overflow: hidden;
    transition: width 0.8s ease;
    white-space: nowrap;
}
.player .div-volume:hover {
    margin: 0px;
    padding: 0px;
    width: 148px;  
}
.player .div-volume:hover .player-volume-bar {
    display: inline-block;
}

/* Barra de volume */
.player .volume-bar {
    -webkit-appearance: none;
    width: 100px;
    height: 8px;
    border-radius: 5px;
    background: var(--player-cor-seekbar-background);
    cursor: pointer;
    outline: none;
}
.player .volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background-color: var(--player-cor-seekbar-point);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.player .volume-bar:hover::-webkit-slider-thumb {
    opacity: 1;
    visibility: visible;
}

/* Botões que mudam com a configuração */
.player .btn-state-deactivated {
    opacity: 50%;
}
.player .btn-state-global {
    opacity: 100%;
}
.player .btn-state-activated {
    opacity: 100%;
    text-shadow: 
        0 0 8px var(--player-cor-btn-active-effect),
        0 0 16px var(--player-cor-btn-active-effect),
        0 0 24px var(--player-cor-btn-active-effect);
}

.player .div-out-buttons {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
/* Botões que ficam fora do player */
.player .btn-out {
    display: block;
    margin: 5px;
    height: 35px;
    
    text-align: center;
    justify-content: center;

    color: var(--player-cor-btn-out-icon);
    background-color: transparent;
    border: none;
    border-radius: 50%;
    
    cursor: pointer;
    transition: background-color 0.3s;
}

.player .btn-out:hover{
    background-color: var(--player-cor-btn-out-highlight);
}
.player .hide .btn-out:hover{
    background-color: var(--player-cor-btn-out-highlight-hidden);
}