@use '../variables.scss' as *;

.statContainer {
  max-width: 230px;
  margin-top: 7px;
  gap: 2px;
  color: var(--theme-header-characters-txt);

  // When the whole container is hovered, draw a box around any buttons. When
  // the button itself is hovered, color in the background. This is to make it
  // easier for folks to understand that there's something here to click.
  *[role='button'] {
    position: relative;

    @include interactive($hover: true, $focus: true, $focusWithin: true) {
      background-color: var(--theme-item-polaroid-hover-border);
      background-color: color-mix(
        in srgb,
        var(--theme-item-polaroid-hover-border),
        transparent 80%
      );
    }

    @include phone-portrait {
      div > &::after {
        content: '';
        display: block;
        border-bottom: 1px dashed var(--theme-item-polaroid-hover-border);
        border-color: color-mix(in srgb, var(--theme-item-polaroid-hover-border), transparent 60%);
        position: absolute;
        bottom: 2px;
        left: 4px;
        right: 4px;
      }
    }

    @media (any-hover: hover) {
      div:hover > & {
        outline: 1px solid var(--theme-item-polaroid-hover-border);
        outline-color: color-mix(in srgb, var(--theme-item-polaroid-hover-border), transparent 60%);
        outline-offset: -1px;
      }
    }
  }
}

.vaultStats {
  composes: statContainer;
  display: grid;
  grid-template-columns: repeat(3, 16px minmax(min-content, 1fr));
  grid-auto-rows: 16px;
  gap: 4px 2px;
  align-items: center;
  font-size: 11px;
  color: var(--theme-header-characters-txt);

  @include phone-portrait {
    flex: 1;
    margin-left: auto;
    margin-right: auto;
  }

  img {
    justify-self: center;
  }
}

.characterStats {
  composes: statContainer;
  composes: flexColumn from '../dim-ui/common.m.scss';
  width: 100%;

  @include phone-portrait {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
}

.topRow {
  composes: flexRow from '../dim-ui/common.m.scss';
  & > div {
    flex-basis: 0;
    flex-grow: 1;
  }
}

.setBonuses {
  --set-bonus-icon-size: 24px;
  display: flex;
  flex-direction: row-reverse;
}
