:host {
  display: inline-block;
}

.container {
  border-radius: 2px;
  display: flex;
  border: 1px solid #686a6f;
}

/**
* @prop --lu-toggle-font-size: font size of toggle
* @prop --lu-toggle-check-icon-font-size: font size of toggle
* @prop --lu-toggle-font-family: font family of toggle

* @prop --lu-toggle-padding-top: font family of toggle
* @prop --lu-toggle-padding-start: font family of toggle
* @prop --lu-toggle-padding-bottom: font family of toggle
* @prop --lu-toggle-padding-end: font family of toggle
* @prop --lu-toggle-active-padding-start: font family of toggle
*/
.toggle {
  padding: var(--lu-toggle-padding-top, 0.563em) var(--lu-toggle-padding-end, 2em) var(--lu-toggle-padding-bottom, 0.563em) var(--lu-toggle-padding-start, 3em);
  position: relative;
  border-style: none;
  background-color: #ffffff;
  font-family: var(--lu-toggle-font-family, "Roboto", sans-serif);
  font-size: var(--lu-toggle-font-size, 16px);
}

button {
  margin: 0;
}

.left-toggle {
  display: flex;
  align-items: center;
  justify-content: end;
  border-right: 1px solid #686a6f;
}

.right-toggle {
  display: flex;
  align-items: center;
  justify-content: end;
  border-left: none;
}

:host([data-start-active]) .left-toggle {
  padding-left: var(--lu-toggle-active-padding-start, 3em);
  padding-right: var(--lu-toggle-padding-end, 2em);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

:host([data-start-active]) .right-toggle {
  background-color: #c6c7c9;
  cursor: pointer;
}

:host([data-end-active]) .right-toggle {
  padding-left: var(--lu-toggle-active-padding-start, 3em);
  padding-right: var(--lu-toggle-padding-end, 2em);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

:host([data-end-active]) .left-toggle {
  background-color: #c6c7c9;
  cursor: pointer;
}

.toggle lu-icon {
  left: 0.5em;
  position: absolute;
  font-size: var(--lu-toggle-check-icon-font-size, 23px);
}