@import '../../globals/vars';

$title-height: 3rem;

@mixin image-container($max-height, $max-width) {
  height: $max-height;
  width: $max-width;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    max-width: $max-width;
    max-height: $max-height;
  }
}

.#{$iot-prefix}--image-tile {
  $image-max-height: 12rem;
  $image-max-width: 20rem;

  background-color: $ui-01;
  width: $image-max-width;
  height: calc(#{$image-max-height} + #{$title-height});
  padding: 0;

  .#{$iot-prefix}--image-tile__image-container {
    @include image-container($image-max-height, $image-max-width);
  }
}

.#{$iot-prefix}--image-tile--wide {
  $image-max-height: 3rem;
  $image-max-width: 5rem;

  width: 100%;
  height: $title-height;
  padding: $spacing-03;
  border-top: 1px solid $ui-03;

  &:nth-of-type(1) {
    border-color: transparent;
  }
  // The border must be hidded when focused or selected, also for sibling
  &.#{$prefix}--tile--is-selected,
  &:focus {
    border-color: transparent;
    & + input + .#{$prefix}--tile {
      border-color: transparent;
    }
  }

  .#{$prefix}--tile-content {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .#{$iot-prefix}--image-tile__image-container {
    @include image-container($image-max-height, $image-max-width);
  }

  .#{$iot-prefix}--image-tile__title {
    background-color: unset;
    width: calc(100% - #{$image-max-width});
  }
}

.#{$iot-prefix}--image-tile__title {
  height: $title-height;
  display: flex;
  align-items: center;
  background-color: $ui-01;
  padding-left: $spacing-05;
  padding-right: $spacing-07; // Make room for check mark when selected
  span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

// position the button on the far right
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$iot-prefix}--image-tile__title__delete {
  position: absolute;
  right: 0rem;
  bottom: 0rem;
}

html[dir='rtl'] {
  .#{$iot-prefix}--image-tile.#{$prefix}--tile--selectable {
    padding: 0;
  }
  .#{$iot-prefix}--image-tile--wide.#{$prefix}--tile--selectable {
    padding: $spacing-03;
  }

  .#{$iot-prefix}--image-tile__title {
    padding-left: $spacing-08;
    padding-right: $spacing-05;
  }
}