@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/convert";

@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;
  gap: space.get("medium");
  padding: space.get("medium");
  z-index: 1;

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

  > .icon,
  > svg {
    width: convert.to-rem(24px);
    height: convert.to-rem(24px);
  }

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

    > .icon,
    > svg {
      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");

  @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;
  width: convert.to-rem(24px);
  height: convert.to-rem(24px);

  @include breakpoint.get("sm") {
    width: convert.to-rem(32px);
    height: convert.to-rem(32px);
  }
}
