.toolbar {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
}

.toggle-edition {
  --gap: 0.5rem;
  --toggle-width: 3.5rem;

  display: flex;
  align-items: center;

  &__label {
    display: inline-flex;
    gap: var(--gap);
    position: relative;
    cursor: pointer;
    color: hsl(0, 0%, 30%);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    &::before {
      order: 2;
      content: "";
      display: block;
      background: hsl(0, 0%, 80%);
      border-radius: 2rem;
      box-shadow: inset 0 0 2px 0 hsla(0, 0%, 0%, 0.5),
        0 0 0 2px hsla(0, 0%, 0%, 0.5);
      width: var(--toggle-width);
      padding: 0 0.6rem;
    }

    &::after {
      content: "";
      display: block;
      width: calc(var(--toggle-width) / 2);
      background: hsl(0, 85%, 41%);
      border: 1px solid hsl(0, 0%, 31%);
      border-radius: 50%;
      box-shadow: 0 0 0 1px hsla(0, 0%, 36%, 0.5);
      position: absolute;
      right: calc((var(--toggle-width) + var(--gap)) / 2);
      top: -1px;
      bottom: -1px;
      transition: all 0.3s ease-in-out 0s;
    }
  }

  &__checkbox {
    opacity: 0;

    &:checked ~ {
      .toggle-edition__label::after {
        background: hsl(120, 76%, 31%);
        right: -1px;
      }
    }
  }
}