@mixin edit {
  cursor: pointer;
  pointer-events: initial;

  border: none;
  outline: none;
  font: inherit;
  color: inherit;

  user-select: none;

  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);

  width: 1.4rem;
  height: 1.4rem;

  margin: 4px 6px;

  &:last-of-type {
    margin-right: 0;
  }

  display: flex;
  align-items: center;
  justify-content: center;

  background: white;

  ion-icon {
    font-size: 1.2rem;
    color: var(--ion-color-dark);
  }

  &[disabled] {
    border: 1px solid var(--ion-color-light);

    ion-icon {
      color: rgba(var(--ion-color-dark-rgb), 0.2);
    }
  }
}

@mixin grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(4, 1fr);

  --card-width: min(calc((100vw - 64px - 48px) / 4), calc((1400px - 64px - 24px) / 4));

  @media (max-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
    --card-width: calc((100vw - 64px - 32px) / 3);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    --card-width: calc((100vw - 64px - 24px) / 2);
  }

  @media (max-width: 576px) {
    grid-template-columns: 1fr;
    --card-width: calc(100vw - 64px);
  }
}

@mixin actions {
  display: grid;
  grid-template-columns: 70% 30%;

  font-size: var(--font-size-small);

  padding: 0 8px;

  p:first-of-type {
    margin: 12px 0 4px;
    font-weight: 700;
  }

  p:last-of-type {
    margin: 2px 0 16px;
    font-size: var(--font-size-very-small);
  }
}

@mixin searchbar {
  ion-searchbar[class*="sc-ion-searchbar"] {
    border: 1px solid #dedede;
    border-radius: 4px;

    --placeholder-opacity: 0.33;
  }
}
