@use "../../../../styles/tools/generate";
@use "../../../../styles/typography/config" as typography;
@use "../../../../styles/tokens/space";
@use "../../../../styles/tools/convert";

@mixin selection-tile-base {
  position: relative;
  display: flex;
  width: 100%;
  gap: space.get("small");
  padding: space.get("medium");
  border: 2px solid var(--color-border-subtle);
  border-radius: space.get("small");
  background: var(--color-fill-primary);
  color: var(--color-text-default);
}

@mixin selection-tile-control {
  flex: 0 0 auto;
  width: space.get("medium");
  min-height: space.get("medium");
}

@mixin selection-tile-body {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  pointer-events: none;
  gap: convert.to-rem(5px);
  display: flex;
  flex-direction: column;

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

@mixin selection-tile-hover {
  border-color: var(--color-border-contrast);
}
@mixin selection-tile-focus {
  outline: 2px solid var(--color-border-contrast);
  outline-offset: 2px;
}
@mixin selection-tile-selected {
  border-color: var(--color-border-accent);
}
@mixin selection-tile-warning {
  border-color: var(--color-border-warning);
}
@mixin selection-tile-error {
  border-color: var(--color-border-negative);
}

@mixin selection-tile-disabled {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-subtle);
  color: var(--color-text-secondary);

  > div {
    cursor: not-allowed;
  }
}

@mixin selection-tile-disabled-control {
  background-color: var(--color-fill-primary);
  border-color: var(--color-border-strong);
}

@mixin selection-tile-interactive {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

@mixin selection-tile-message {
  margin-top: 0px;
}

@mixin selection-tile-expander-summary {
  @include generate.css-map(typography.$caption, "default");
  font-weight: 700;
}