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

@import '../mixins';
@import '../../stylesheets/variables';

$width: 186px;
$height: 186px;
$guide-offset: 6px;
$border-width: 1px;

.container {
  position: relative;
  width: $width;
  height: $height;
  border: {
    radius: 4px;
    width: $border-width;
    style: solid;
  }
  overflow: hidden;
  user-select: none;

  @include light-theme() {
    border-color: $color-gray-25;
    background: $color-white;
  }

  @include dark-theme() {
    border-color: $color-gray-60;
    background: $color-gray-90;
  }
}

.dragActive {
  composes: container;

  @include light-theme() {
    border-color: $color-ultramarine;
  }

  @include dark-theme() {
    border-color: $color-ultramarine-light;
  }
}

.image {
  width: $width;
  height: $height;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  composes: image;
  animation: spin 1s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;

  @include light-theme() {
    color: $color-gray-25;
  }

  @include dark-theme() {
    color: $color-gray-60;
  }
}

.guide {
  width: $width - (2 * $guide-offset);
  height: $height - (2 * $guide-offset);
  position: absolute;
  left: $guide-offset - $border-width;
  top: $guide-offset - $border-width;
  border: {
    radius: 0px;
    width: $border-width;
    style: dashed;
  }
  pointer-events: none;

  @include light-theme() {
    border-color: $color-gray-25;
  }

  @include dark-theme() {
    border-color: $color-gray-60;
  }
}

.close-button {
  width: 16px;
  height: 16px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 8px;
  right: 8px;
  font-family: $inter;
  border: none;
  background: none;
  padding: 0;

  &-icon {
    @include light-theme() {
      color: $color-black;
    }
    @include dark-theme() {
      color: $color-white;
    }
  }
}

.emoji-button {
  width: 41px;
  height: 28px;
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  border-radius: 13.5px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  @include light-theme() {
    background-color: $color-gray-05;
    color: $color-gray-90;
  }

  @include dark-theme() {
    background-color: $color-gray-75;
    color: rgba(255, 255, 255, 0.75);
  }
}