declare const _default: "\n:host {\n  --button-bar-gap: var(--bs-button-bar-gap, 0.5rem);\n  --index-btn-color: var(\n    --bs-index-btn-color,\n    light-dark(rgb(0 0 0 / 40%), rgb(255 255 255 / 20%))\n  );\n  --index-btn-active-color: var(\n    --bs-index-btn-active-color,\n    light-dark(rgb(0 0 0 / 100%), rgb(255 255 255 / 80%))\n  );\n  --index-btn-size: var(--bs-index-btn-size, 1rem);\n  --btn-background-color: var(\n    --bs-btn-background-color,\n    light-dark(rgb(0 0 0 / 40%), rgb(255 255 255 / 20%))\n  );\n  --btn-border-radius: var(--bs-btn-border-radius, 9999px);\n  --btn-size: var(--bs-btn-size, 2rem);\n  --next-icon: var(\n    --bs-next-icon,\n    url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"white\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\"> <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/></svg>')\n  );\n  --prev-icon: var(\n    --bs-prev-icon,\n    url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"white\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\"> <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/></svg>')\n  );\n  --play-icon: var(\n    --bs-play-icon,\n    url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"white\" class=\"bi bi-play\" viewBox=\"0 0 16 16\"> <path d=\"M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z\"/></svg>')\n  );\n  --pause-icon: var(\n    --bs-pause-icon,\n    url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"white\" class=\"bi bi-pause\" viewBox=\"0 0 16 16\"> <path d=\"M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5\"/></svg>')\n  );\n\n  display: block;\n}\n\n#container {\n  display: grid;\n  gap: var(--button-bar-gap);\n  grid-template:\n    'slider slider slider' auto\n    'play index nav' 1fr / auto;\n}\n\n#slider-container {\n  grid-area: slider;\n}\n\n#controls-container {\n  grid-area: nav;\n  justify-self: right;\n}\n\n#play-btn-container {\n  grid-area: play;\n  justify-self: left;\n}\n\n.btn {\n  background-color: var(--btn-background-color);\n  border: none;\n  border-radius: var(--btn-border-radius);\n  cursor: pointer;\n  height: var(--btn-size);\n  overflow: hidden;\n  position: relative;\n  transition: background-color 200ms;\n  width: var(--btn-size);\n}\n\n.btn::before {\n  background: no-repeat center;\n  box-sizing: inherit;\n  content: '';\n  inset: 0;\n  position: absolute;\n}\n\n#prev-btn::before {\n  background-image: var(--prev-icon);\n}\n\n#next-btn::before {\n  background-image: var(--next-icon);\n}\n\n#play-btn::before {\n  background-image: var(--play-icon);\n}\n\n#play-btn[part~='pause']::before {\n  background-image: var(--pause-icon);\n}\n\n#index-container {\n  align-items: center;\n  display: flex;\n  gap: 0.5rem;\n  grid-area: index;\n  justify-self: center;\n}\n\n.index-btn {\n  background-color: var(--index-btn-color);\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n  height: var(--index-btn-size);\n  transition: background-color 400ms;\n  width: var(--index-btn-size);\n\n  &[part~='active'], &[part~='active']:hover {\n    background-color: var(--index-btn-active-color);\n  }\n}\n\n@media (hover: hover) {\n  :host {\n    --index-btn-hover-color: var(\n      --bs-index-btn-hover-color,\n      light-dark(rgb(0 0 0 / 60%), rgb(255 255 255 / 40%))\n    );\n    --btn-hover-background-color: var(\n      --bs-btn-hover-background-color,\n      light-dark(rgb(0 0 0 / 60%), rgb(255 255 255 / 40%))\n    );\n  }\n\n  .index-btn:hover {\n    background-color: var(--index-btn-hover-color);\n  }\n\n  .btn:hover {\n    background-color: var(--btn-hover-background-color);\n  }\n}\n";
export default _default;