// TODO: deprecated after rebreand is complete - use color-wave-page-container
import styled from 'styled-components'
import PageContainer from './page-container'

const DefaultBlueWave =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNDEiIHZpZXdCb3g9IjAgMCAxNDAwIDM0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxtYXNrIGlkPSJtYXNrMCIgbWFzay10eXBlPSJhbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTIwIiB5PSIxMSIgd2lkdGg9IjE0NDEiIGhlaWdodD0iNzE1Ij4KPHBhdGggZD0iTS0xOS45OTk4IDUxLjk5OTlDLTE5Ljk5OTggNTEuOTk5OSAyMjQgMTEuOTk5NyA3MDggMTEuOTk5NkMxMTkyIDExLjk5OTUgMTQyMCA1Mi4wMDAxIDE0MjAgNTIuMDAwMUwxNDIwIDcyNkwtMTkuOTk5OSA3MjZMLTE5Ljk5OTggNTEuOTk5OVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcikiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swKSI+CjxwYXRoIGQ9Ik0tMjAuMDAwMSA1MS45OTk5Qy0yMC4wMDAxIDUxLjk5OTkgMjI0IDExLjk5OTcgNzA4IDExLjk5OTZDMTE5MiAxMS45OTk1IDE0MjAgNTIuMDAwMSAxNDIwIDUyLjAwMDFMMTQyMCA3MjZMLTIwLjAwMDIgNzI2TC0yMC4wMDAxIDUxLjk5OTlaIiBmaWxsPSJ1cmwoI3BhaW50MV9saW5lYXIpIi8+CjxwYXRoIGQ9Ik0zODkuNjMxIDIuOTU0NzRDNTQ5LjIyMiAtMTIuMjM0NiAxNDI0LjU1IDg2Ljg1ODEgMTYwMy4zNyAzNDYuMDQ1TDEzOTEuMjUgLTExMC4zNTlMMzg5LjYzMSAyLjk1NDc0WiIgZmlsbD0idXJsKCNwYWludDJfbGluZWFyKSIgZmlsbC1vcGFjaXR5PSIwLjA2Ii8+CjxwYXRoIGQ9Ik0xMDQzIC01Ni45OTk5Qzg4NS42MTkgLTI2LjQ4MiAtOS4wMDAwNyAtMTIuNDk5MSAtMjAxLjQ2OSA2NzdMLTEzOSAtNi45OTk5OEwxMDQzIC01Ni45OTk5WiIgZmlsbD0idXJsKCNwYWludDNfbGluZWFyKSIgZmlsbC1vcGFjaXR5PSIwLjA2Ii8+CjxwYXRoIGQ9Ik03ODMuMzY1IC01NC43MTAxQzg5Ny4yNTcgLTUuNTk3MTMgMTU3MS4wNyAxNTMuMDQyIDE2MDIuNDEgNzA2TDE2NzEuNjUgNTNMNzgzLjM2NSAtNTQuNzEwMVoiIGZpbGw9InVybCgjcGFpbnQ0X2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4wNiIvPgo8cGF0aCBkPSJNOTE1LjkyNyA5OS45MjQzQzc1NS44MjcgMTA4LjE3OCAtMTMxLjk4OCAtMi44Mzk0MSAtNDE4LjgwNyA2NTMuMDQ4TC0yMTkuMTY0IC0yNzIuMTQzTDkxNS45MjcgOTkuOTI0M1oiIGZpbGw9InVybCgjcGFpbnQ1X2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iMC4xMSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjY0OCIgeTE9IjY4MSIgeDI9IjY0OCIgeTI9Ii0zMTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjM1OTM3NSIgc3RvcC1jb2xvcj0iIzAwNkVGQSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDNEQjQiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyIiB4MT0iNjQ4IiB5MT0iNjgxIiB4Mj0iNjQ4IiB5Mj0iLTMxNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDM2Q0YyIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwNkVGQSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50Ml9saW5lYXIiIHgxPSIxNTQ4Ljc3IiB5MT0iLTMwLjA0NTgiIHgyPSI1MjMuNTcxIiB5Mj0iLTI2My4zMTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQzX2xpbmVhciIgeDE9Ii0yNTUuMzU1IiB5MT0iMzAwLjgwNyIgeDI9IjY2Mi4xNzciIHkyPSItMjEyLjYwNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDRfbGluZWFyIiB4MT0iMTcwNS40IiB5MT0iNDMwLjYwNCIgeDI9IjEwOTYuOTMiIHkyPSItMTA5LjI4MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDVfbGluZWFyIiB4MT0iLTQxOS42NiIgeTE9IjI3My4wMTYiIHgyPSI1NjAuNTQ5IiB5Mj0iLTEwNy4zMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMCI+CjxyZWN0IHdpZHRoPSIxNDAwIiBoZWlnaHQ9IjM0MSIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K'

const TopDefaultBlueWave =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNDEiIGZpbGw9Im5vbmUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0MDAgMzQxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDcwMCAxNzAuNSkiIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiPgogIDxtYXNrIGlkPSJtYXNrMCIgeD0iLTIwIiB5PSIxMSIgd2lkdGg9IjE0NDEiIGhlaWdodD0iNzE1IiBtYXNrLXR5cGU9ImFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgPHBhdGggZD0ibS0yMCA1MnMyNDQtNDAgNzI4LTQwIDcxMiA0MCA3MTIgNDB2Njc0aC0xNDQweiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIvPgogIDwvbWFzaz4KICA8ZyBtYXNrPSJ1cmwoI21hc2swKSI+CiAgIDxwYXRoIGQ9Im0tMjAgNTJzMjQ0LTQwIDcyOC00MCA3MTIgNDAgNzEyIDQwdjY3NGgtMTQ0MHoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiLz4KICAgPGcgZmlsbC1vcGFjaXR5PSIuMDYiPgogICAgPHBhdGggZD0ibTM4OS42MyAyLjk1NDdjMTU5LjU5LTE1LjE4OSAxMDM0LjkgODMuOTAzIDEyMTMuNyAzNDMuMDlsLTIxMi4xMi00NTYuNHoiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcikiLz4KICAgIDxwYXRoIGQ9Im0xMDQzLTU3Yy0xNTcuMzggMzAuNTE4LTEwNTIgNDQuNTAxLTEyNDQuNSA3MzRsNjIuNDY5LTY4NHoiIGZpbGw9InVybCgjcGFpbnQzX2xpbmVhcikiLz4KICAgIDxwYXRoIGQ9Im03ODMuMzYtNTQuNzFjMTEzLjg5IDQ5LjExMyA3ODcuNyAyMDcuNzUgODE5LjA0IDc2MC43MWw2OS4yNC02NTN6IiBmaWxsPSJ1cmwoI3BhaW50NF9saW5lYXIpIi8+CiAgIDwvZz4KICAgPHBhdGggZD0ibTkxNS45MyA5OS45MjRjLTE2MC4xIDguMjUzNy0xMDQ3LjktMTAyLjc2LTEzMzQuNyA1NTMuMTJsMTk5LjY0LTkyNS4xOXoiIGZpbGw9InVybCgjcGFpbnQ1X2xpbmVhcikiIGZpbGwtb3BhY2l0eT0iLjExIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyIiB4MT0iNjQ4IiB4Mj0iNjQ4IiB5MT0iNjgxIiB5Mj0iLTMxNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjMDA2RUZBIiBvZmZzZXQ9Ii4zNTkzOCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjMDAzREI0IiBvZmZzZXQ9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhciIgeDE9IjY0OCIgeDI9IjY0OCIgeTE9IjY4MSIgeTI9Ii0zMTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAzNkNGMiIgb2Zmc2V0PSIwIi8+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDZFRkEiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iMTU0OC44IiB4Mj0iNTIzLjU3IiB5MT0iLTMwLjA0NiIgeTI9Ii0yNjMuMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgb2Zmc2V0PSIwIi8+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXIiIHgxPSItMjU1LjM2IiB4Mj0iNjYyLjE4IiB5MT0iMzAwLjgxIiB5Mj0iLTIxMi42IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iMCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDRfbGluZWFyIiB4MT0iMTcwNS40IiB4Mj0iMTA5Ni45IiB5MT0iNDMwLjYiIHkyPSItMTA5LjI4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iMCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDVfbGluZWFyIiB4MT0iLTQxOS42NiIgeDI9IjU2MC41NSIgeTE9IjI3My4wMiIgeTI9Ii0xMDcuMzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgb2Zmc2V0PSIwIi8+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KICAgPHJlY3Qgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzQxIiBmaWxsPSIjZmZmIi8+CiAgPC9jbGlwUGF0aD4KIDwvZGVmcz4KPC9zdmc+Cg=='

const TopDefaultDynamicBlueWave =
  'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNDAwIDM0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KIDxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA3MDAgMTcwLjUpIiBjbGlwLXBhdGg9InVybCgjY2xpcDApIj4KICA8bWFzayBpZD0ibWFzazAiIHg9Ii0yMCIgeT0iMTEiIHdpZHRoPSIxNDQxIiBoZWlnaHQ9IjcxNSIgbWFzay10eXBlPSJhbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxwYXRoIGQ9Im0tMjAgNTJzMjQ0LTQwIDcyOC00MCA3MTIgNDAgNzEyIDQwdjY3NGgtMTQ0MHoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcikiLz4KICA8L21hc2s+CiAgPGcgbWFzaz0idXJsKCNtYXNrMCkiPgogICA8cGF0aCBkPSJtLTIwIDUyczI0NC00MCA3MjgtNDAgNzEyIDQwIDcxMiA0MHY2NzRoLTE0NDB6IiBmaWxsPSJ1cmwoI3BhaW50MV9saW5lYXIpIi8+CiAgIDxnIGZpbGwtb3BhY2l0eT0iLjA2Ij4KICAgIDxwYXRoIGQ9Im0zODkuNjMgMi45NTQ3YzE1OS41OS0xNS4xODkgMTAzNC45IDgzLjkwMyAxMjEzLjcgMzQzLjA5bC0yMTIuMTItNDU2LjR6IiBmaWxsPSJ1cmwoI3BhaW50Ml9saW5lYXIpIi8+CiAgICA8cGF0aCBkPSJtMTA0My01N2MtMTU3LjM4IDMwLjUxOC0xMDUyIDQ0LjUwMS0xMjQ0LjUgNzM0bDYyLjQ2OS02ODR6IiBmaWxsPSJ1cmwoI3BhaW50M19saW5lYXIpIi8+CiAgICA8cGF0aCBkPSJtNzgzLjM2LTU0LjcxYzExMy44OSA0OS4xMTMgNzg3LjcgMjA3Ljc1IDgxOS4wNCA3NjAuNzFsNjkuMjQtNjUzeiIgZmlsbD0idXJsKCNwYWludDRfbGluZWFyKSIvPgogICA8L2c+CiAgIDxwYXRoIGQ9Im05MTUuOTMgOTkuOTI0Yy0xNjAuMSA4LjI1MzctMTA0Ny45LTEwMi43Ni0xMzM0LjcgNTUzLjEybDE5OS42NC05MjUuMTl6IiBmaWxsPSJ1cmwoI3BhaW50NV9saW5lYXIpIiBmaWxsLW9wYWNpdHk9Ii4xMSIvPgogIDwvZz4KIDwvZz4KIDxkZWZzPgogIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjY0OCIgeDI9IjY0OCIgeTE9IjY4MSIgeTI9Ii0zMTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNkVGQSIgb2Zmc2V0PSIuMzU5MzgiLz4KICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwM0RCNCIgb2Zmc2V0PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSI2NDgiIHgyPSI2NDgiIHkxPSI2ODEiIHkyPSItMzE2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMzZDRjIiIG9mZnNldD0iMCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjMDA2RUZBIiBvZmZzZXQ9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQyX2xpbmVhciIgeDE9IjE1NDguOCIgeDI9IjUyMy41NyIgeTE9Ii0zMC4wNDYiIHkyPSItMjYzLjMyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iMCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDNfbGluZWFyIiB4MT0iLTI1NS4zNiIgeDI9IjY2Mi4xOCIgeTE9IjMwMC44MSIgeTI9Ii0yMTIuNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBvZmZzZXQ9IjAiLz4KICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQ0X2xpbmVhciIgeDE9IjE3MDUuNCIgeDI9IjEwOTYuOSIgeTE9IjQzMC42IiB5Mj0iLTEwOS4yOCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBvZmZzZXQ9IjAiLz4KICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQ1X2xpbmVhciIgeDE9Ii00MTkuNjYiIHgyPSI1NjAuNTUiIHkxPSIyNzMuMDIiIHkyPSItMTA3LjMxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iMCIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGNsaXBQYXRoIGlkPSJjbGlwMCI+CiAgIDxyZWN0IHdpZHRoPSIxNDAwIiBoZWlnaHQ9IjM0MSIgZmlsbD0iI2ZmZiIvPgogIDwvY2xpcFBhdGg+CiA8L2RlZnM+Cjwvc3ZnPgo='

const BubbleBlueWave =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI1NDkiIGZpbGw9IiNlNmYxZmYiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0NDAgNTQ5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHBhdGggZD0ibTAgNDBzMjQ0LTQwIDcyOC00MCA3MTIgNDAgNzEyIDQwdjUwOWwtMTQ0MC0xLjJlLTR6Ii8+Cjwvc3ZnPgo='

const TopBubbleBlueWave =
  'data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI1NDkiIHZpZXdCb3g9IjAgMCAxNDQwIDU0OSIgZmlsbD0iI2U2ZjFmZiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0NDAgNTA5QzE0NDAgNTA5IDExOTYgNTQ5IDcxMiA1NDlDMjI4IDU0OSAzLjQ5Njk0ZS0wNiA1MDkgMy40OTY5NGUtMDYgNTA5TDQuNzk5NTFlLTA1IC0zLjgxODQ5ZS0wNkwxNDQwIDAuMDAwMTIyMDdMMTQ0MCA1MDlaIiAvPgo8L3N2Zz4K'

const variations = {
  default: {
    image: DefaultBlueWave,
    position: '0 100%',
  },
  top: {
    image: TopDefaultBlueWave,
    position: '0 0',
  },
  topDynamic: {
    image: TopDefaultDynamicBlueWave,
    position: '0 0',
  },

  light: {
    image: BubbleBlueWave,
    position: '0 100%',
  },
  'light-top': {
    image: TopBubbleBlueWave,
    position: '0 0',
  },
}

type Variation = keyof typeof variations

const BlueWavePageContainer = styled(PageContainer)<{ variation: Variation }>`
  background-image: url(${({ variation = 'default' }) => variations[variation]?.image ?? ''});
  background-position: ${({ variation = 'default' }) => variations[variation]?.position ?? '0 100%'};
  background-repeat: no-repeat;
  background-size: inherit;
  background-position-x: center;
  @media (min-width: 1400px) {
    background-size: contain;
  }
`

BlueWavePageContainer.displayName = 'BlueWavePageContainer'

export default BlueWavePageContainer