@use "../../styles/variables" as vars;
@use "../../styles/colors" as colors;

@keyframes skeleton-pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.flight-list-skeleton {
  &__row {
    display: flex;
    align-items: center;
    padding: vars.$space-xl;
    gap: vars.$space-m;

    &:not(:last-child) {
      border-bottom: 1px dashed colors.$border;
    }
  }

  &__cell {
    height: 16px;
    background-color: colors.$blue-light2;
    border-radius: vars.$border-radius;
    animation: skeleton-pulse 1.5s ease-in-out infinite;

    &--number {
      width: vars.$width-flight-number;
    }

    &--station {
      width: 80px;
    }

    &--time {
      width: 50px;
    }

    &--status {
      width: vars.$status-width;
    }
  }
}
