$photo-gallery-radius: 8px;
$photo-gallery-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$photo-gallery-card-padding: 0px;
$photo-gallery-gap: 8px;
$photo-gallery-status-size: 20px;
$photo-gallery-icon-default: #d9d9d9;
$photo-gallery-icon-active: rgb(59, 65, 144);
$photo-gallery-unpublished-bg: #8c6e6e30;
$photo-gallery-padding-inner: 10px;

.photo-gallery-card {
  width: 100%;
  border-radius: $photo-gallery-radius;
  overflow: hidden;
  box-shadow: $photo-gallery-shadow;
  padding: 0;

  &--unpublished {
    background: $photo-gallery-unpublished-bg;
  }

  .ant-card-body {
    padding: $photo-gallery-card-padding;
  }

  .card_image-wrapper {
    width: 100%;
    position: relative;
  }

  .card_select {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px 8px;
  }

  .card_image {
    width: 100%;
    object-fit: cover;
    display: block;
  }

  .card_title {
    margin-top: 8px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    padding-left: $photo-gallery-padding-inner;
    padding-right: $photo-gallery-padding-inner;
    text-overflow: ellipsis;
  }

  .card_tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-left: $photo-gallery-padding-inner;
    padding-right: $photo-gallery-padding-inner;
    margin-top: 6px;

    .ant-tag {
      margin-inline-end: 0;
    }
  }

  .card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $photo-gallery-gap;
    margin-top: 10px;
    padding: $photo-gallery-padding-inner;
  }

  .card_actions {
    display: flex;
    align-items: center;
    gap: $photo-gallery-gap;

    .card_action-delete {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
    }
  }

  .card_status {
    display: flex;
    align-items: center;
    gap: $photo-gallery-gap;
  }

  &__icon {
    font-size: $photo-gallery-status-size;
    color: $photo-gallery-icon-default;

    &--active {
      color: $photo-gallery-icon-active;
    }
  }
}