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

@import '../mixins.scss';
@import '../colors.scss';
@import '../fonts.scss';

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

// They are 128x128 natively, but we downscale them so that they look good
// on retina displays.
$emoji-width: 64px;
$emoji-height: 64px;

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.non-draggable {
  // Just for SortableJS filter
  cursor: auto;
}

.size-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  user-select: none;

  border: {
    radius: 6px;
    width: $border-width;
    style: solid;
  }

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

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

  width: $width;
  height: $height;

  &[data-drag-active='true'] {
    @include light-theme() {
      border-color: $color-ultramarine;
    }

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

.image {
  width: 100%;
  height: 100%;

  &[data-art-type='emoji'] {
    width: $emoji-width;
    height: $emoji-height;
  }
}

.spinner {
  composes: image;
  display: flex;
  justify-content: center;
  align-items: center;

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

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

.emoji-picker-spinner {
  composes: spinner;

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

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

  padding: 4px;
  border-radius: 6px;

  // Should be the same as width of EmojiPickerReact
  min-width: 350px;
}

.guide {
  border: {
    radius: 0px;
    width: $border-width;
    style: dashed;
  }
  @include light-theme() {
    border-color: $color-gray-25;
  }

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

  width: $width - (2 * $guide-offset);
  height: $height - (2 * $guide-offset);
  position: absolute;
  inset-inline-start: $guide-offset - $border-width;
  top: $guide-offset - $border-width;
  pointer-events: none;

  &[data-art-type='emoji'] {
    width: $emoji-width;
    height: $emoji-height;
    position: absolute;
    inset-inline-start: calc(($width - $emoji-width) / 2);
    top: calc(($height - $emoji-height) / 2);
  }
}

.close-button {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 20px;
  height: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: $inter;
  border: none;
  background: none;
  padding: 0;

  filter: drop-shadow(0px 0px 2px $color-black-alpha-60);

  &::after {
    content: '';
    width: 20px;
    height: 20px;
    background: $color-white;
    mask-image: url(/src/assets/icons/x-20.svg);
    -webkit-mask-image: url(/src/assets/icons/x-20.svg);
  }
}

.emoji-button {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  border: none;
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

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

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

.emoji {
  display: flex;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;

  font-size: 24px;
  line-height: 24px;
}

.emoji-name-input {
  width: 100%;
  padding-block: 7px;
  padding-inline: 8px;
  border-radius: 4px;
  background-color: transparent;
  font-size: 14px;
  font-family: $inter;

  &::placeholder {
    color: $color-gray-45;
  }

  &:focus {
    outline: 0;
    border-color: $color-accent-blue;
  }

  @include light-theme() {
    border: 1px solid $color-gray-15;
    color: $color-gray-90;
  }

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