@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}


@keyframes appear-grow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

.picmo-picker .error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--secondary-text-color);

  & .iconContainer {
    opacity: 0.8;
    animation: appear-grow 250ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    --color-primary: var(--error-color);
    --color-secondary: var(--error-color-dark);
  }

  & .title {
    animation: appear 250ms;
    animation-delay: 50ms;
    animation-fill-mode: both;
  }

  & button {
    padding: 8px 16px;
    cursor: pointer;
    background: var(--background-color);
    border: 1px solid var(--text-color);
    border-radius: 5px;
    color: var(--text-color);

    &:hover {
      background: var(--text-color);
      color: var(--background-color);
    }
  }
}
