.push {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  transition: 0.2s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.push .push-side {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: white;
  /* transition: border-color 0.2s ease; */
}

.push .push-top {
  height: 100%;
  display: block;
  position: relative;
  border-radius: 4px;
  border: 1px solid transparent;
  background: white;
  color: #444;
  font-weight: bold;
  transform: translateY(-2px);
  transition: transform 0.1s cubic-bezier(0.54, 1.6, 0.5, 1);
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
  transition: color 0.1s ease;
  /* transition: border-color 0.2s ease; */
}

.push:disabled .push-top {
  height: 100%;
  display: block;
  position: relative;
  border-radius: 4px;
  border: 1px solid transparent;
  background: #ddd;
  color: #999;
  font-weight: bold;
  transform: translateY(0px);
  transition: transform 0.1s cubic-bezier(0.54, 1.6, 0.5, 1);
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 0px 0 hsla(0, 0%, 0%, 0.04), 0 1px 4px hsla(0, 0%, 0%, 0.13), 0 1px 1px hsla(0, 0%, 0%, 0.05);
}

.push:enabled:hover {
  border: 2px solid var(--accent-fade);
}

.push:enabled:hover .push-side {
  background-color: var(--accent);
  border: 1px solid var(--accent);
}

.push:enabled:hover .push-top {
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.push:enabled:hover.checked .push-top {
  color: #fff;
}

.push:enabled:hover .push-top * {
  color: var(--accent)!important;
}

.push:enabled:hover.checked .push-top * {
  color: #fff!important;
}

.push:enabled:active .push-top, .push.checked .push-top, .push.active .push-top {
  transform: translateY(0px);
  transition: transform 0.1s cubic-bezier(0.54, 1.6, 0.5, 1);
  background: var(--accent-gradient);
  color: white;
}

.push:enabled:active .push-top *, .push.checked .push-top *, .push.active .push-top * {
  color: white!important;
}

.push.checked:hover .push-top *, .push.active:hover .push-top * {
  color: white!important;
}

.push:focus:not(:focus-visible) {
  outline: none;
}

/* admin variants */

.admin-page .push:enabled:hover {
  border: 2px solid #ffa98f;
}

.admin-page .push:enabled:hover .push-side {
  background-color: #ff5d38;
  border: 1px solid #ff5d38;
}

.admin-page .push:enabled:hover .push-top {
  border: 1px solid #ff5d38;
  color: #ff5d38;
}

.admin-page .push:enabled:active .push-top, .admin-page .push.checked .push-top {
  background: #ff5d38;
  color: white;
}

.rounded,
.rounded .push-side,
.rounded .push-top {
  border-radius: 40px;
  transition: border-radius 0.2s ease;
}

.push img {
  filter: opacity(0.8);
}

.push:hover:not(:disabled):not(:active) img {
  filter: invert(0.4) sepia(1) saturate(5) hue-rotate(105deg);
}

.push:disabled img {
  filter: grayscale(100%) opacity(40%);
}

.push:active:not(:disabled) img {
  filter: invert();
}