.proj-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    display: flex;
    z-index: 3;
    display: flex;
    gap: 4px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.proj-video-controls.is-visible {
    transform: translateY(0);
}

.proj-video-controls__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.proj-video-controls__volume {
    width: 32px;
    height: auto;
    position: relative;
}

.proj-video-controls__mute {
    font-size: 0px;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000000 url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M18.9531%2010.5805C18.9531%2010.4331%2018.916%2010.3638%2018.8945%2010.3334C18.87%2010.2989%2018.8277%2010.262%2018.7559%2010.2348C18.5911%2010.1726%2018.3788%2010.2008%2018.2432%2010.2963C16.6547%2011.6743%2015.5542%2012.3609%2014.5684%2012.685C13.6123%2012.9992%2012.7303%2012.9487%2012.0801%2013.0014C11.4673%2013.051%2011.0541%2013.481%2011.0049%2013.9584L11%2014.0541V17.9457C11.0002%2018.46%2011.4266%2018.9455%2012.0801%2018.9984C12.7303%2019.0511%2013.6121%2019.0006%2014.5684%2019.3148C15.554%2019.6388%2016.6542%2020.3251%2018.2422%2021.7025C18.3777%2021.7987%2018.5906%2021.8274%2018.7559%2021.765C18.8278%2021.7378%2018.87%2021.701%2018.8945%2021.6664C18.916%2021.6361%2018.9531%2021.5669%2018.9531%2021.4193V10.5805ZM19.9531%2021.4193C19.9531%2022.7702%2018.4737%2023.1261%2017.6338%2022.4975C14.8704%2020.091%2013.9025%2020.0832%2012.5898%2020.0287L11.999%2019.9955C10.9671%2019.9118%2010.1136%2019.154%2010.0107%2018.1498L10%2017.9457V14.0541C10.0002%2012.9497%2010.8982%2012.0935%2011.999%2012.0043C13.5582%2011.878%2014.3701%2012.207%2017.0684%209.98184L17.6338%209.50235C18.4737%208.87373%2019.9531%209.22965%2019.9531%2010.5805V21.4193Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M23.8163%2011.6722C24.031%2011.4575%2024.3812%2011.456%2024.5772%2011.6879C25.5342%2012.8199%2026.1113%2014.2838%2026.1113%2015.8821C26.1112%2017.4797%2025.5337%2018.9417%2024.5772%2020.0732C24.3812%2020.3052%2024.031%2020.3037%2023.8162%2020.089L23.781%2020.0537C23.6247%2019.8974%2023.626%2019.645%2023.7706%2019.478C24.6053%2018.5139%2025.1112%2017.2574%2025.1113%2015.8821C25.1113%2014.5061%2024.6059%2013.2479%2023.7707%2012.2833C23.6261%2012.1162%2023.6248%2011.8638%2023.781%2011.7075L23.8163%2011.6722Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M22.4023%2013.0862C22.617%2012.8715%2022.9681%2012.8696%2023.1554%2013.1086C23.7542%2013.8729%2024.1113%2014.836%2024.1113%2015.8821C24.1112%2016.9275%2023.7538%2017.8889%2023.1555%2018.6525C22.9682%2018.8916%2022.617%2018.8897%2022.4022%2018.675L22.3669%2018.6397C22.2107%2018.4834%2022.2128%2018.2313%2022.3505%2018.0584C22.8262%2017.4611%2023.1112%2016.7051%2023.1113%2015.8821C23.1113%2015.0584%2022.8267%2014.3008%2022.3506%2013.7029C22.2129%2013.53%2022.2107%2013.2778%2022.367%2013.1215L22.4023%2013.0862Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M20.9885%2014.5C21.2031%2014.2854%2021.5953%2014.3545%2021.7585%2014.6104C22.0059%2014.9984%2022.1113%2015.3879%2022.1113%2015.8821C22.1112%2016.3754%2022.0055%2016.7729%2021.7585%2017.1601C21.5951%2017.416%2021.203%2017.4757%2020.9883%2017.261L20.953%2017.2258C20.7967%2017.0695%2020.8028%2016.8175%2020.913%2016.6259C21.0389%2016.4068%2021.1112%2016.153%2021.1113%2015.8821C21.1113%2015.6106%2021.0392%2015.3556%2020.9131%2015.1357C20.803%2014.9438%2020.7969%2014.6916%2020.9533%2014.5352L20.9885%2014.5Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;
    mix-blend-mode: difference;
}

.proj-video-controls__mute.is-low {
    background: #000000 url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M18.9531%2010.5805C18.9531%2010.4331%2018.916%2010.3638%2018.8945%2010.3334C18.87%2010.2989%2018.8277%2010.262%2018.7559%2010.2348C18.5911%2010.1726%2018.3788%2010.2008%2018.2432%2010.2963C16.6547%2011.6743%2015.5542%2012.3609%2014.5684%2012.685C13.6123%2012.9992%2012.7303%2012.9487%2012.0801%2013.0014C11.4673%2013.051%2011.0541%2013.481%2011.0049%2013.9584L11%2014.0541V17.9457C11.0002%2018.46%2011.4266%2018.9455%2012.0801%2018.9984C12.7303%2019.0511%2013.6121%2019.0006%2014.5684%2019.3148C15.554%2019.6388%2016.6542%2020.3251%2018.2422%2021.7025C18.3777%2021.7987%2018.5906%2021.8274%2018.7559%2021.765C18.8278%2021.7378%2018.87%2021.701%2018.8945%2021.6664C18.916%2021.6361%2018.9531%2021.5669%2018.9531%2021.4193V10.5805ZM19.9531%2021.4193C19.9531%2022.7702%2018.4737%2023.1261%2017.6338%2022.4975C14.8704%2020.091%2013.9025%2020.0832%2012.5898%2020.0287L11.999%2019.9955C10.9671%2019.9118%2010.1136%2019.154%2010.0107%2018.1498L10%2017.9457V14.0541C10.0002%2012.9497%2010.8982%2012.0935%2011.999%2012.0043C13.5582%2011.878%2014.3701%2012.207%2017.0684%209.98184L17.6338%209.50235C18.4737%208.87373%2019.9531%209.22965%2019.9531%2010.5805V21.4193Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M20.9885%2014.5C21.2031%2014.2854%2021.5953%2014.3545%2021.7585%2014.6104C22.0059%2014.9984%2022.1113%2015.3879%2022.1113%2015.8821C22.1112%2016.3754%2022.0055%2016.7729%2021.7585%2017.1601C21.5951%2017.416%2021.203%2017.4757%2020.9883%2017.261L20.953%2017.2258C20.7967%2017.0695%2020.8028%2016.8175%2020.913%2016.6259C21.0389%2016.4068%2021.1112%2016.153%2021.1113%2015.8821C21.1113%2015.6106%2021.0392%2015.3556%2020.9131%2015.1357C20.803%2014.9438%2020.7969%2014.6916%2020.9533%2014.5352L20.9885%2014.5Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;
}

.proj-video-controls__mute.is-medium {
    background: #000000 url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M18.9531%2010.5805C18.9531%2010.4331%2018.916%2010.3638%2018.8945%2010.3334C18.87%2010.2989%2018.8277%2010.262%2018.7559%2010.2348C18.5911%2010.1726%2018.3788%2010.2008%2018.2432%2010.2963C16.6547%2011.6743%2015.5542%2012.3609%2014.5684%2012.685C13.6123%2012.9992%2012.7303%2012.9487%2012.0801%2013.0014C11.4673%2013.051%2011.0541%2013.481%2011.0049%2013.9584L11%2014.0541V17.9457C11.0002%2018.46%2011.4266%2018.9455%2012.0801%2018.9984C12.7303%2019.0511%2013.6121%2019.0006%2014.5684%2019.3148C15.554%2019.6388%2016.6542%2020.3251%2018.2422%2021.7025C18.3777%2021.7987%2018.5906%2021.8274%2018.7559%2021.765C18.8278%2021.7378%2018.87%2021.701%2018.8945%2021.6664C18.916%2021.6361%2018.9531%2021.5669%2018.9531%2021.4193V10.5805ZM19.9531%2021.4193C19.9531%2022.7702%2018.4737%2023.1261%2017.6338%2022.4975C14.8704%2020.091%2013.9025%2020.0832%2012.5898%2020.0287L11.999%2019.9955C10.9671%2019.9118%2010.1136%2019.154%2010.0107%2018.1498L10%2017.9457V14.0541C10.0002%2012.9497%2010.8982%2012.0935%2011.999%2012.0043C13.5582%2011.878%2014.3701%2012.207%2017.0684%209.98184L17.6338%209.50235C18.4737%208.87373%2019.9531%209.22965%2019.9531%2010.5805V21.4193Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M22.4023%2013.0862C22.617%2012.8715%2022.9681%2012.8696%2023.1554%2013.1086C23.7542%2013.8729%2024.1113%2014.836%2024.1113%2015.8821C24.1112%2016.9275%2023.7538%2017.8889%2023.1555%2018.6525C22.9682%2018.8916%2022.617%2018.8897%2022.4022%2018.675L22.3669%2018.6397C22.2107%2018.4834%2022.2128%2018.2313%2022.3505%2018.0584C22.8262%2017.4611%2023.1112%2016.7051%2023.1113%2015.8821C23.1113%2015.0584%2022.8267%2014.3008%2022.3506%2013.7029C22.2129%2013.53%2022.2107%2013.2778%2022.367%2013.1215L22.4023%2013.0862Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M20.9885%2014.5C21.2031%2014.2854%2021.5953%2014.3545%2021.7585%2014.6104C22.0059%2014.9984%2022.1113%2015.3879%2022.1113%2015.8821C22.1112%2016.3754%2022.0055%2016.7729%2021.7585%2017.1601C21.5951%2017.416%2021.203%2017.4757%2020.9883%2017.261L20.953%2017.2258C20.7967%2017.0695%2020.8028%2016.8175%2020.913%2016.6259C21.0389%2016.4068%2021.1112%2016.153%2021.1113%2015.8821C21.1113%2015.6106%2021.0392%2015.3556%2020.9131%2015.1357C20.803%2014.9438%2020.7969%2014.6916%2020.9533%2014.5352L20.9885%2014.5Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;
}

.proj-video-controls__mute.is-muted {
    background: #000000 url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M22.3661%209.32901C22.5614%209.13384%2022.8779%209.13381%2023.0732%209.32901C23.2684%209.52425%2023.2683%209.84078%2023.0732%2010.036L10.3339%2022.7753C10.1387%2022.9705%209.82218%2022.9705%209.62691%2022.7753C9.43165%2022.58%209.43165%2022.2635%209.62691%2022.0682L11.7363%2019.9579C10.8252%2019.7782%2010.1037%2019.069%2010.0097%2018.1512L9.99898%2017.9471V14.0556C9.99925%2012.9512%2010.8972%2012.095%2011.998%2012.0058C13.5571%2011.8795%2014.3691%2012.2084%2017.0673%209.9833L17.6328%209.50381C18.4726%208.87537%2019.9519%209.23135%2019.9521%2010.5819V11.7431L22.3661%209.32901ZM19.9521%2021.4208C19.9521%2022.7716%2018.4727%2023.1275%2017.6328%2022.4989C15.8244%2020.9241%2014.7844%2020.3784%2013.914%2020.1727L14.7158%2019.371C15.6637%2019.7141%2016.7331%2020.3958%2018.2411%2021.704C18.3767%2021.8001%2018.5896%2021.8289%2018.7548%2021.7665C18.8267%2021.7393%2018.8689%2021.7024%2018.8935%2021.6678C18.915%2021.6375%2018.9521%2021.5681%2018.9521%2021.4208V15.1356L19.9521%2014.1356V21.4208ZM18.7548%2010.2362C18.5901%2010.1741%2018.3777%2010.2024%2018.2421%2010.2978C16.6537%2011.6757%2015.5532%2012.3623%2014.5673%2012.6864C13.6113%2013.0007%2012.7292%2012.9502%2012.0791%2013.0028C11.4664%2013.0525%2011.0532%2013.4825%2011.0039%2013.9599L10.999%2014.0556V17.9471C10.9992%2018.4614%2011.4256%2018.9469%2012.0791%2018.9999C12.2582%2019.0144%2012.455%2019.0195%2012.666%2019.0282L18.9521%2012.7431V10.5819C18.9521%2010.4347%2018.915%2010.3652%2018.8935%2010.3349C18.8689%2010.3004%2018.8266%2010.2634%2018.7548%2010.2362Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;
}

.proj-video-controls__volume-bar {
    width: 32px;
    height: 0px;
    position: absolute;
    bottom: 32px;
    left: 0;
    background: #D9D9D9;
    transition: height 0.3s ease-in-out;
}

.proj-video-controls__volume-bar.is-active {
    height: 220px;
}

.proj-video-controls__volume-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    pointer-events: none;
}

.proj-video-controls__progress-bar {
    position: relative;
    width: 100%;
    height: 32px;
    background: #D9D9D9;
}

.proj-video-controls__progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #000000;
    pointer-events: none;
}

.proj-video-controls__play {
    font-size: 0px;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M20.7852%2014.7012C21.7851%2015.2786%2021.7851%2016.7215%2020.7852%2017.2989L12.714%2021.9591C11.714%2022.5364%2010.4641%2021.8148%2010.464%2020.6602L10.464%2011.3399C10.4641%2010.1853%2011.714%209.46377%2012.714%2010.0411L20.7852%2014.7012ZM20.2852%2016.4327C20.6184%2016.2402%2020.6184%2015.7599%2020.2852%2015.5675L12.214%2010.9073C11.8807%2010.7149%2011.4641%2010.9551%2011.464%2011.3399L11.464%2020.6602C11.4641%2021.045%2011.8807%2021.2853%2012.214%2021.0929L20.2852%2016.4327Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;
    mix-blend-mode: difference;
    
}

.proj-video-controls__play.is-playing {
    background: url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Adifference%22%3E%3Cpath%20d%3D%22M12.4004%2021V11C12.4004%2010.6962%2012.6464%2010.4502%2012.9502%2010.4502C13.254%2010.4502%2013.5%2010.6962%2013.5%2011V21C13.5%2021.3038%2013.254%2021.5498%2012.9502%2021.5498C12.6464%2021.5498%2012.4004%2021.3038%2012.4004%2021Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3Cpath%20d%3D%22M18.5%2021V11C18.5%2010.6962%2018.746%2010.4502%2019.0498%2010.4502C19.3536%2010.4502%2019.5996%2010.6962%2019.5996%2011V21C19.5996%2021.3038%2019.3536%2021.5498%2019.0498%2021.5498C18.746%2021.5498%2018.5%2021.3038%2018.5%2021Z%22%20fill%3D%22%23F8F8F8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center center;
    background-size: 100% 100%;  
}

.proj-video-controls__time {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 32px;
    display: flex;
    gap: 4px;
    padding: 0 8px;
    pointer-events: none;
}

.proj-video-controls__time-elapsed {
    color: #F8F8F8;
    mix-blend-mode: difference;
}

.proj-video-controls__time-total {
    color: #595959;
}

.proj-video-controls__time-total::before {
    content: "/";
    margin-right: 4px;
}