// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.StoryImage {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: variables.$z-index-base;

  &--thumbnail {
    height: 72px;
    width: 46px;
  }

  &__image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  &__overlay-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    inset-inline-start: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &__error {
    @include mixins.color-svg(
      '../images/full-screen-flow/alert-outline.svg',
      variables.$color-white
    );
    & {
      align-items: center;
      display: flex;
      height: 32px;
      justify-content: center;
      width: 32px;
    }
  }

  &__spinner-bubble {
    align-items: center;
    background-color: variables.$color-gray-75;
    border-radius: 32px;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
  }

  &__spinner {
    @include mixins.dark-theme {
      &__circle {
        background-color: variables.$color-white;
      }

      &__arc {
        background-color: variables.$color-gray-75;
      }
    }
  }
}