// Images
//================================================== //
@use 'sass:list';

$placeholder-icon-height: 22px;

$images-size: (
  'sm': (60px, 60px),
  'md': (154px, 120px),
  'lg': (300px, 350px)
);

// Image Placeholder
@mixin image-placeholder($this-width, $this-height, $this-icon-height) {
  background: $ids-color-palette-white;
  border: 1px solid $image-border-color;
  height: $this-height;
  max-height: $this-height;
  max-width: $this-width;
  text-align: center;
  width: $this-width;

  .icon {
    margin-top: calc(($this-height - $this-icon-height) / 2);
  }
}

@each $key, $value in $images-size {
  .image-#{$key} {
    border: 1px solid transparent; // to prevent jump on focus

    &:focus {
      @include focus-state();
    }

    img {
      border: 1px solid transparent; // to prevent jump on focus
      max-height: list.nth($value, 2);
      max-width: list.nth($value, 1);

      &:focus {
        @include focus-state();
      }
    }

    &.placeholder {
      @include image-placeholder(list.nth($value, 1), list.nth($value, 2), $placeholder-icon-height);

      &:focus {
        @include focus-state();
      }
    }
  }
}

.image-auto {
  border: 1px solid transparent; // to prevent jump on focus

  &:focus {
    @include focus-state();
  }

  img {
    border: 1px solid transparent; // to prevent jump on focus
    &:focus {
      @include focus-state();
    }
  }
}

.image-round {
  border: 1px solid transparent; // to prevent jump on focus
  border-radius: 50%;
  display: inline-block;
  height: 48px;
  width: 48px;

  &.round {
    border-radius: 50%;
  }

  &:focus {
    @include focus-state();
  }
}

// Photo with svg status
.image-user-status {
  display: inline-block;

  .icon {
    background-color: $body-color-primary-background;
    border-radius: 50%;
    margin-left: -17px;
    margin-top: 35px;
    position: absolute;
  }
}

// Initials for when photo is absent
.image-initials,
.avatar {
  background: $ids-color-palette-emerald-50;
  border: 1px solid transparent; // to prevent jump on focus
  color: $ids-color-palette-white;
  border-radius: 50%;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  min-height: 32px;
  height: 32px;
  max-height: 32px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  user-select: none;

  &.three-char {
    text-transform: capitalize;
  }

  &.large {
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    font-size: 20px;
    line-height: 48px;
    min-width: 48px;
    width: 48px;
    max-width: 48px;
  }

  &.round {
    border-radius: 50%;
  }

  &.square {
    border-radius: 8px;
  }

  &:focus {
    @include focus-state();
  }
}

@each $name in $color-names {
  $i: list.index($color-names, $name);
  $color: list.nth($color-vars, $i);

  //Classes for Tags
  .avatar.#{$name} {
    background: list.nth($color-vars, $i);
  }
}

.actionable {
  cursor: pointer;

  &.datagrid-img {
    margin: auto;
  }
}

// Print Support
@media print {
  .image-initials {
    background-color: $ids-color-palette-slate-30;
  }
}