/* Vuetify's default icon-button sizing leaves mdi-plus looking tiny in
 * the circle (its glyph has a lot of whitespace around the cross). */
.circular-plus-btn[data-v-7e13f2b9] .v-icon {
  font-size: var(--plus-icon-size);
}

/* A little depth: lit from the top-left, soft drop shadow, and a lift on
 * hover / press so it reads as a pressable button. */
.circular-plus-btn[data-v-7e13f2b9] {
  background-image: linear-gradient(
    145deg,
    color-mix(in srgb, rgb(var(--v-theme-primary)) 70%, white),
    rgb(var(--v-theme-primary)) 65%
  );
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.circular-plus-btn[data-v-7e13f2b9]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 9px rgba(0, 0, 0, 0.32),
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(0, 0, 0, 0.22);
}
.circular-plus-btn[data-v-7e13f2b9]:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.circular-plus-btn[data-v-7e13f2b9] .v-icon {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}