.gui-card {
  @apply rounded-small shadow-small;
}

.gui-card-inner {
  @apply flex flex-col rounded-small bg-white;
  @apply border border-solid border-neutral-90;

  img {
    max-width: 100%;
    height: auto;
  }
}

.gui-card-content {
  @apply p-4;

  @include respond-to-min($screen-sm) {
    @apply p-6;
  }
}

.gui-card-sm .gui-card-content {
  @apply p-4;
}

.gui-card-md .gui-card-content {
  @include respond-to-min($screen-sm) {
    @apply p-6;
  }
}

.gui-card-title {
  @apply text-lg font-semi-bold mb-4;
}

.gui-card-description {
  @apply text-neutral-primary leading-6 mb-4;
}

.gui-card-footer {
  @apply flex justify-end;
}

.gui-card-interactive {
  cursor: pointer;

  &:focus .gui-card-inner {
    @apply shadow-button-primary-focus;
  }
}

.gui-card-selected {
  .gui-card-inner {
    @apply shadow-blue-primary-1px border-blue-primary;
  }

  &:hover .gui-card-inner,
  &:focus .gui-card-inner,
  &.gui-card-active .gui-card-inner {
    @apply shadow-blue-primary-2px;
  }
}

.gui-card-highlighted {
  .gui-card-inner {
    @apply shadow-yellow-primary-1px border-yellow-primary;
  }

  &:hover .gui-card-inner,
  &:focus .gui-card-inner,
  &.gui-card-active .gui-card-inner {
    @apply shadow-yellow-primary-3px;
  }
}

.gui-card-added {
  .gui-card-inner {
    @apply shadow-green-primary-1px border-green-primary;
  }
}

.gui-card-removed {
  .gui-card-inner {
    @apply shadow-red-primary-1px border-red-primary;
  }
}

.gui-card-disabled .gui-card-content {
  @supports (filter: blur()) {
    @apply transition-all duration-200;

    filter: blur(3px);
  }
}

.gui-card-controls {
  @apply absolute top-0 p-2 -mt-10 transition-all duration-200;
}

.gui-card:not(.gui-card-disabled) {
  &:active,
  &:hover,
  &:focus,
  &:focus-within {
    .gui-card-controls {
      @apply mt-0;
    }
  }
}