@import url("./setup.css");

input,
input:focus {
  outline: none;
  border: none;
}

.wrapper {
    width: 100%;
    margin: auto;
    position: relative;
    max-width: var(--max-screen);
}

header {
    width: 100%;
    gap: 0.5rem;
    height: auto;
    display: flex;
    padding: 1.25rem;
    padding-bottom: 0px;
}

header svg {
    width: auto;
    height: 2rem;
    margin: auto 0;
}

header span {
    font-size: 2rem;
    color: var(--color-white-2);
    font-family: var(--font-regular);
}

#navigation {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 1rem 0;
    position: sticky;
    position: -webkit-sticky;
    background-color: var(--color-black-1);
}

#navigation .search {
    width: 100%;
    height: 100%;
    padding: 0 1.25rem;
    max-height: 5rem;
    display: flex;
    overflow: hidden;
    padding-bottom: 0.5rem;
    transition: max-height 0.25s ease 0s, padding-bottom 0.25s ease 0s;
}

#navigation .search[data-display="false"] {
    max-height: 0px;
    padding-bottom: 0rem;
}

#navigation .search input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 1.25rem;
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    color: var(--color-white-4);
    font-family: var(--font-medium);
    background-color: var(--color-black-3);
    transition: background-color 0.25s ease, color 0.25s ease;
}

#navigation .search input:hover,
#navigation .search input:focus {
    color: var(--color-white-3);
    background-color: var(--color-gray-3);
}

.filter {
    width: 100%;
    display: block;
    padding: 0 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.filter .filter-wrapper {
    gap: 0.5rem;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}

.filter .filter-wrapper .chip {
    width: auto;
    height: 100%;
    z-index: 300;
    position: relative;
}

.filter .filter-wrapper .chip .chip-placeholder {
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 3rem;
    align-items: center;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    background-color: var(--color-black-3);
    transition: background-color 0.25s ease;
}

.filter .filter-wrapper .chip .chip-placeholder svg {
    height: 0.5rem;
    margin-left: -0.1rem;
    margin-right: 0.25rem;
}

.filter .filter-wrapper .chip .chip-placeholder svg path {
    fill: var(--color-white-3);
}

.filter .filter-wrapper .chip .chip-option-item {
    position: relative;
    font-size: 1.25rem;
    margin-top: -0.15rem;
    color: var(--color-white-3);
    font-family: var(--font-medium);
    background-color: var(--color-black-3);
    transition: background-color 0.25s ease;
}

.filter .filter-wrapper .chip .chip-placeholder .chip-option-item {
    opacity: 1;
    position: relative;
    transform: translate(0%, 0%); 
}

.filter .filter-wrapper .chip .chip-placeholder.pre-animation .chip-option-item {
    opacity: 0;
    transform: translate(0%, 20%);
}

.filter .filter-wrapper .chip .chip-placeholder.start-animation .chip-option-item {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.filter .filter-wrapper .chip .chip-option-item .emoji {
    margin-top: -0.25rem;
}

.filter .filter-wrapper .chip .chip-option-item .desc {
    margin-top: 0px;
    padding-right: 0.25rem;
}

.filter .filter-wrapper .chip-search .chip-placeholder {
    background-color: var(--color-green-1);
    transition: background-color 0.25s ease;
}

.filter .filter-wrapper .chip-search .chip-placeholder svg {
    height: 1.5rem;
    margin: 0 0.25rem;
}

.filter .filter-wrapper .chip-search .chip-placeholder svg path {
    fill: var(--color-black-1);
    transition: fill 0.25s ease;
}

.filter .filter-wrapper select.chip {
    border-radius: 3rem;
    min-inline-size: 3rem;
    justify-content: space-between;
}

.filter .filter-wrapper select.chip::picker-icon {
    display: none;
}

.filter .filter-wrapper select.chip::picker(select) {
    opacity: 1;
    border-radius: 1rem;
    margin-block-end: 0.5rem;
    margin-block-start: 0.5rem;
    transition: opacity 0.5s ease, margin-block-start 0.5s ease;

    @starting-style {
        opacity: 0;
        margin-block-start: 1rem;
    }
}

.filter .filter-wrapper select.chip,
.filter .filter-wrapper select.chip::picker(select) {
    border: 0px;
    appearance: base-select;
    background-color: var(--color-black-3);
}

.filter .filter-wrapper select.chip #picker {
    rotate: 0deg;
    transition: rotate 0.15s ease;
}

.filter .filter-wrapper select.chip:open #picker {
    rotate: 180deg;
}

.filter .filter-wrapper select.chip option.chip-option-item {
    opacity: 1;
    margin-top: 0rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: opacity 0.5s ease, margin-top 0.5s ease;

    @starting-style {
        opacity: 0;
        margin-top: 0.5rem;
    }
}

.filter .filter-wrapper select.chip option::checkmark {
    display: none;
}

.filter .filter-wrapper select.chip option:checked {
    background-color: var(--color-gray-3);
}

main {
    --music-player-height: 15rem;
    width: 100%;
    position: relative;
    padding-bottom: var(--music-player-height);
}

main .music-content {
    gap: 1rem;
    width: 100%;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    flex-wrap: nowrap;
    max-height: 10rem;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.25rem;
    justify-content: start;
    background-color: var(--color-black-1);
    transition: background-color 0.25s ease, max-height 0.25s ease, padding 0.25s ease;
}

main .music-content[data-display="false"] {
    max-height: 0px;
    padding: 0rem 1.25rem;
}

main .music-content[data-active="true"],
main .music-content:hover {
    background-color: var(--color-black-2);
}

main .music-content img.music-cover {
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
    position: relative;
    border-radius: 0.5rem;
    background: var(--color-gray-3);
    background-image: var(--color-gray-3)
}

main .music-content .music-data {
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

main .music-content .music-data .title {
    font-size: 1.5rem;
    color: var(--color-white-1);
    font-family: var(--font-bold);
}

main .music-content .music-data .artist {
    font-size: 1rem;
    color: var(--color-white-3);
    font-family: var(--font-medium);
}

main .music-content .music-data .artist::before {
    content: "By ";
    font-family: var(--font-regular);
    color: var(--color-white-4);
}

main .music-content .music-time {
    display: flex;
    align-items: center;
    padding-right: 0.1rem;
    justify-content: center;
    color: var(--color-white-4);
    font-family: var(--font-medium);
}

footer {
    left: 50%;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    position: fixed;
    transform: translate(-50%, 0);
    max-width: var(--max-screen);
    transition: bottom 0.25s ease;
}

footer .music-wrapper {
    width: 100%;
    padding: 1.25rem;
    --progress: 0%;
    overflow: hidden;
    border-radius: 1rem;
    transition: --progress .1s linear, padding .25s ease;
}

footer .music-wrapper::before {
    top: 50%;
    left: 50%;
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 1rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    background: conic-gradient(
        from 90deg,
        var(--color-green-1) var(--progress),
        var(--color-black-3) 0
    );
    transform: translate(-50%, -50%);
}

footer .music-wrapper::after {
    content: "";
    top: 50%;
    left: 50%;
    z-index: -1;
    position: absolute;
    border-radius: 0.75rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    transform: translate(-50%, -50%);
    background-color: var(--color-black-2);
}

footer .music-wrapper .music-content {
    gap: 1rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

footer .music-wrapper .music-content img.music-cover {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
}

footer .music-wrapper .music-content .music-data {
    width: 100%;
    height: 100%;
    gap: 0.25rem;
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    position: relative;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

footer .music-wrapper .music-content .music-data .title {
    font-size: 1.5rem;
    color: var(--color-white-1);
    font-family: var(--font-bold);
}

footer .music-wrapper .music-content .music-data .artist {
    font-size: 1rem;
    color: var(--color-white-3);
    font-family: var(--font-medium);
}

footer .music-wrapper .music-content .music-action {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4rem;
    flex-direction: row;
    background-color: var(--color-green-1);
    transition: background-color 0.25s ease;
}

footer .music-wrapper .music-content .music-action .music-action-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transform: translate(0%, 0%);
    transition: transform 0.25s ease;
}


footer .music-wrapper .music-content .music-action .music-action-item svg {
    width: auto;
    height: 1.5rem;
    max-width: 1.75rem;
    margin-top: 0.07rem;
    margin-left: 0.1rem;
}

footer .music-wrapper .music-content .music-action .music-action-item svg path,
footer .music-wrapper .music-content .music-action .music-action-item svg rect {
    fill: var(--color-black-2);
    transition: fill 0.25s ease;
}

footer .music-wrapper .music-player-content {
    width: 100%;
    display: flex;
    overflow: hidden;
    padding-top: 2rem;
    flex-direction: row;
}

footer .music-wrapper .music-player-content .music-player-content-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translate(0%, 0%);
    transition: transform 0.25s ease;
}

footer .music-wrapper .music-player-content .music-player .music-timeline {
    gap: 1rem;
    display: flex;
    font-size: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--color-white-3);
    font-family: var(--font-regular);
}

footer .music-wrapper .music-player-content .music-player .music-timeline .start-time,
footer .music-wrapper .music-player-content .music-player .music-timeline .end-time {
    min-width: 2.75rem;
}

footer .music-wrapper .music-player-content .music-player .music-timeline .end-time {
    text-align: end;
}

footer .music-wrapper .music-player-content .music-player .music-timeline input.timeline {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    appearance: none;
    position: relative;
    border-radius: 1rem;
    -webkit-appearance: none;
    accent-color: var(--color-green-1);
    background-color: var(--color-gray-1);
}

footer .music-wrapper .music-player-content .music-player .music-timeline input.timeline::before {
    content: "";
    height: 0.5rem;
    position: absolute;
    border-radius: 1rem;
    width: var(--progress);
    background-color: var(--color-green-1);
}

footer .music-wrapper .music-player-content .music-player .music-timeline input.timeline::-webkit-slider-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 1rem;
    -webkit-appearance: none;
    background-color: var(--color-green-1);
}

footer .music-wrapper .music-player-content .music-player .music-navigation {
    gap: 3rem;
    width: auto;
    height: 100%;
    display: flex;
    padding-top: 1rem;
    align-items: center;
    justify-content: center;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .music-navigation-item {
    width: auto;
    height: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-shuffle svg,
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-repeat svg {
    height: 1.5rem;
    width: auto;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-prev svg,
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-next svg {
    height: 1.75rem;
    width: auto;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-play-pause svg {
    height: 2.5rem;
    width: auto;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-repeat svg path:nth-child(2),
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-shuffle svg path {
    fill: var(--color-gray-1);   
    transition: fill 0.1s ease;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-repeat svg path:nth-child(1),
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-shuffle svg path {
    stroke: var(--color-gray-1);
    transition: stroke 0.1s ease;
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-repeat[data-active="true"] svg path:nth-child(2),
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-shuffle[data-active="true"] svg path {
    fill: var(--color-green-1);   
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-repeat[data-active="true"] svg path:nth-child(1),
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-shuffle[data-active="true"] svg path {
    stroke: var(--color-green-1);
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-prev svg path,
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-next svg path {
    fill: var(--color-white-3);
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-play-pause svg path {
    fill: var(--color-white-1);
}

footer .music-wrapper .music-player-content .music-player .music-navigation .nav-play-pause[data-play="true"] svg#play,
footer .music-wrapper .music-player-content .music-player .music-navigation .nav-play-pause[data-play="false"] svg#pause {
    display: none;
}

footer .music-wrapper .music-player-content .music-setting {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item {
    gap: 0.25rem;
    height: 100%;
    display: flex;
    font-size: 1.25rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white-3);
    font-family: var(--font-regular);
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-value {
    gap: 1rem;
    padding: 0.5rem;
    display: flex;
    font-size: 1.5rem;
    flex-direction: row;
    align-items: center;
    border-radius: 0.5rem;
    justify-content: center;
    color: var(--color-white-2);
    font-family: var(--font-bold);
    background-color: var(--color-gray-3);
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-value .value-action {
    width: 2rem;
    height: 2rem;
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    border-radius: 0.25rem;
    justify-content: center;
    background-color: var(--color-gray-2);
}
footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-value .value-action svg {
    width: 1rem;
    height: 1rem;
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-value .value-action svg line {
    stroke: var(--color-green-1);
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-switch {
    width: 100%;
    height: 3rem;
    display: flex;
    font-size: 1rem;
    padding: 0.5rem;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    border-radius: 0.5rem;
    justify-content: space-around;
    background-color: var(--color-gray-3);
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-switch .setting-value {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    justify-content: center;
    color: var(--color-white-3);
    font-family: var(--font-bold);
    background-color: var(--color-gray-3);
    transition: color 0.25s ease, background-color 0.25s ease;
}

footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-switch[data-on="false"] .setting-value:nth-child(1),
footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-switch[data-on="true"] .setting-value:nth-child(2) {
    color: var(--color-black-2);
    background-color: var(--color-green-1);
}

footer .music-wrapper[data-content-item="2"] .music-content .music-action .music-action-item,
footer .music-wrapper[data-content-item="2"] .music-player-content .music-player-content-item {
    transform: translate(-100%, 0%);
}

main .music-content .music-data .title,
main .music-content .music-data .artist,
footer .music-wrapper .music-content .music-data .title,
footer .music-wrapper .music-content .music-data .artist {
    line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (hover: hover) {
    .filter .filter-wrapper .chip-search .chip-placeholder:hover {
        background-color: var(--color-black-3);
    }

    footer .music-wrapper .music-content .music-action:hover .music-action-item svg path,
    footer .music-wrapper .music-content .music-action:hover .music-action-item svg rect,
    .filter .filter-wrapper .chip-search .chip-placeholder:hover svg path {
        fill: var(--color-green-1);
    } 

    .filter .filter-wrapper select.chip:hover {
        cursor: pointer;
    }

    .filter .filter-wrapper select.chip option.chip-option-item:hover,
    .filter .filter-wrapper select.chip:hover .chip-placeholder, 
    .filter .filter-wrapper select.chip:hover .chip-placeholder .chip-option-item,
    footer .music-wrapper .music-content .music-action:hover {
        background-color: var(--color-gray-3);
    }
}

@media screen and (max-width: 640px) {
    footer .music-wrapper .music-player-content .music-setting .music-setting-item .music-setting-value {
        gap: 0.75rem;
    }
}