/* 

we use the ::part psuedo selector here because we are 
using the shadow dom in the html

https://developer.mozilla.org/en-US/docs/Web/CSS/::part

We are using the shadow dom we do not want styles from the store to affect the preview bar
This also has the added benefit of not affecting the store styles

*/

:is(body):has([data-splittestpro-preview-container]) {
  padding-bottom: 64px;
}

::part(splittestpro-preview) {
  --blue: #2f73da;
  --white: #ffffff;
  --black: #303030;
  --green: #16a679;
  --light-green: #d0ede4;
  --light-grey: #dedede;
  --dark-grey: #616a75;
}

::part(splittestpro-preview__control-bar),
::part(splittestpro-preview__control-bar--active) {
  position: fixed;
  bottom: 0;
  z-index: 2147483647;
  width: 100%;
  background: var(--black);
  padding: 6px;
  color: var(--white);
  text-align: center;
  font-family: sans-serif;
  font-size: 16px;
  line-height: normal;
  display: grid;
  grid-template-columns: 1fr 0fr 1fr;
  box-sizing: border-box;
  margin: 0;
}

::part(splittestpro-preview__control-bar--active) {
  background: var(--white);
  color: var(--black);
}

::part(splittestpro-preview__status),
::part(splittestpro-preview__status--active) {
  background-color: var(--light-grey);
  color: var(--black);
  padding: 4px 16px 4px 32px;
  border-radius: 32px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
}

::part(splittestpro-preview__status--active) {
  background-color: var(--light-green);
  color: var(--dark-green);
}

::part(splittestpro-preview__status):before,
::part(splittestpro-preview__status--active):before {
  content: " ";
  background-color: var(--dark-grey);
  height: 10px;
  width: 10px;
  display: block;
  position: absolute;
  left: 16px;
  border-radius: 50%;
}

::part(splittestpro-preview__status--active):before {
  background-color: var(--green);
}

::part(splittestpro-preview__close) {
  background-color: var(--light-grey);
  color: var(--black);
  padding: 8px 12px;
  border-radius: 32px;
  border: 0;
  cursor: pointer;
  justify-self: self-start;
}

::part(splittestpro-preview__select) {
  background-color: var(--white);
  color: var(--black);
  border: 0;
  padding: 8px 12px;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M5 8l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 30px;
  justify-self: self-end;
  text-overflow: ellipsis;
  max-width: 125px;
  font-size: 16px;
  cursor: pointer;
}