@use "sass:map";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/convert";
@use "../../Icon/styles/config" as icon-config;

@function build-unsized-icon-selector($selector) {
  $result: $selector;

  @each $size-name in map.keys(map.get(icon-config.$sizes, default)) {
    $result: "#{$result}:not(.icon--#{$size-name})";
  }

  @return $result;
}

$tile-unsized-icon-selector: build-unsized-icon-selector(">.icon") + ", " +
  build-unsized-icon-selector(">svg");

@mixin tile-base {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: convert.to-rem(5px);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-fill-primary);
  color: var(--color-text-default);
  word-break: break-word;
}

@mixin tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: space.get("medium");
  padding: space.get("medium");
  z-index: 1;

  *:last-child {
    margin-bottom: 0;
  }

  @include breakpoint.get("md") {
    flex-direction: column;
    padding: space.get("large");
  }
}

@mixin tile-body-icon-ratio {
  #{$tile-unsized-icon-selector} {
    width: convert.to-rem(24px);
    height: convert.to-rem(24px);
  }

  @include breakpoint.get("md") {
    #{$tile-unsized-icon-selector} {
      width: convert.to-rem(32px);
      height: convert.to-rem(32px);
    }
  }
}

@mixin tile-body-compact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: space.get("xsmall");
  padding: convert.to-rem(15px);
  flex-shrink: 0;
  text-wrap: nowrap;

  @include breakpoint.get("md") {
    flex-direction: column;
    padding: space.get("medium");
  }
}

@mixin tile-action {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: convert.to-rem(15px);
  padding: space.get("large") space.get("medium");
  word-break: normal;

  @include breakpoint.get("sm") {
    gap: space.get("medium");
    padding: space.get("large");
  }
}

@mixin tile-action-shell {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-border-strong);
}

@mixin tile-action-icon {
  flex-shrink: 0;
  --icon-size: #{convert.to-rem(24px)};

  @include breakpoint.get("sm") {
    --icon-size: #{convert.to-rem(32px)};
  }
}