import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import styled, { css } from 'styled-components';
import { Slider } from '@mui/material';

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
var centerCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
var sizeCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 54px;\n  height: 54px;\n"])));
var PlaybackContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  flex-direction: row;\n  position: absolute;\n  width: 188px;\n  height: 66px;\n  left: 20px;\n  top: 20px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 33px;\n  box-shadow: 0px -3px 20px ", ";\n"])), centerCss, function (_ref) {
  var theme = _ref.theme;
  return theme.colourMaterialPrimary;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colourMaterialBorder;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colorBoxShadow;
});
var PlaybackIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  ", "\n  left: 5px;\n  top: 5px;\n  background: ", ";\n  border-radius: 50px;\n"])), sizeCss, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colourBrandPrimaryDark;
});
var PlaybackIconWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n"])));
var LiveStatusIconWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 70px;\n  top: 40px;\n"])));
var IconButtonContainer = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  background: ", ";\n  ", "\n\n  border-radius: 50px;\n  border: none;\n  top: 5px;\n\n  .IconButtons {\n    ", "\n\n    cursor: pointer;\n  }\n"])), centerCss, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colourBrandPrimaryDark;
}, sizeCss, sizeCss);
var PlaybackPlayContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  position: absolute;\n  flex-direction: row;\n  width: 66px;\n  height: 66px;\n  left: 20px;\n  top: 20px;\n  background: ", ";\n  border-radius: 50px;\n  box-shadow: 0px -3px 20px ", ";\n  border: none;\n"])), centerCss, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colourMaterialPrimary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colorBoxShadow;
});
var PlaybackPlayIconWrapper = styled.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  ", "\n\n  ", "\n\n  background: ", ";\n  border-radius: 50px;\n  border: none;\n"])), sizeCss, centerCss, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colourBrandPrimaryTintExtraLight;
});
var PlaybackDatePickerContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: absolute;\n  width: 346px;\n  height: 66px;\n  left: 76px;\n  top: 0px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-shadow: 0px -3px 20px ", ";\n\n  &.DatePickerContainerWithDate {\n    width: 460px;\n  }\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.colourMaterialPrimaryBackground;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.colourMaterialBorder;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.colorBoxShadow;
});
var PlaybackIconButtonContainer = styled.button(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n\n  position: absolute;\n  ", "\n\n  border-radius: 50px;\n  background: ", ";\n  border: none;\n\n  .PlayIconButtons {\n    ", "\n\n    ", "\n  }\n"])), centerCss, sizeCss, function (_ref12) {
  var theme = _ref12.theme;
  return theme.colourBrandPrimaryTintExtraLight;
}, centerCss, sizeCss);
var PlaybackDatePickerWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 151px;\n  height: 66px;\n  background: ", ";\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n\n  .PlaybackDatePickerButton {\n    margin: 10px !important;\n    width: 92%;\n    justify-content: space-evenly;\n  }\n\n  .DatePickerButton {\n    margin-left: 15px;\n    margin-top: 10px;\n  }\n\n  .react-datepicker {\n    display: flex;\n  }\n\n  &.DatePickerWrapperWithDate {\n    width: 58%;\n  }\n  .MuiButton-endIcon {\n    > div {\n      ", "\n    }\n  }\n"])), function (_ref13) {
  var theme = _ref13.theme;
  return theme.colourMaterialPrimary;
}, centerCss);
var PlaybackMediaContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n\n  position: absolute;\n  flex-direction: row;\n\n  width: 185px;\n  height: 66px;\n  left: 159px;\n  gap: 25px;\n  background: ", ";\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  cursor: pointer;\n\n  > svg {\n    > path {\n      fill: ", ";\n      cursor: pointer;\n    }\n  }\n\n  &.PlaybackMediaContainerWithDate {\n    position: relative;\n    left: 0;\n    right: 0;\n  }\n"])), centerCss, function (_ref14) {
  var theme = _ref14.theme;
  return theme.colourMaterialPrimary;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.colourTextPrimary;
});
var PlayPauseIconContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  > div {\n    > svg {\n      > path {\n        fill: ", ";\n        cursor: pointer;\n      }\n    }\n  }\n"])), function (_ref16) {
  var theme = _ref16.theme;
  return theme.colourTextPrimary;
});
var PrettoSliderWrapper = styled(Slider)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color : ", " !important;\n  height : 4px !important;\n  padding : 0px !important;\n  bottom: 0px !important;\n  position: absolute !important;\n  border-radius: 0px !important;\n\n  & .MuiSlider-track {\n    border: none;\n  }\n\n  & .MuiSlider-rail {\n    color : ", ";\n    opacity : 0.9;\n  }\n\n  & .MuiSlider-thumb{\n    height : 10px;\n    width : 10px;\n    background: ", ";\n    border: 2px solid ", ";\n    \n    &:focus, &:hover, &.Mui-active, &.Mui-focusVisible {\n      box-shadow: inherit;\n    },\n  }"])), function (_ref17) {
  var theme = _ref17.theme;
  return theme.colourTextPrimary;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.colourMaterialBorder;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.colourMaterialPrimary;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.colourTextPrimary;
});

export { IconButtonContainer, LiveStatusIconWrapper, PlayPauseIconContainer, PlaybackContainer, PlaybackDatePickerContainer, PlaybackDatePickerWrapper, PlaybackIconButtonContainer, PlaybackIconContainer, PlaybackIconWrapper, PlaybackMediaContainer, PlaybackPlayContainer, PlaybackPlayIconWrapper, PrettoSliderWrapper };
//# sourceMappingURL=style.js.map
