/* wgf-house-picker - the exterior House Type / Size / Base Style / Roof Style /
 * Roof Color panel (brick #7). Chrome is the client's own extracted housing
 * art (same wood-frame window and list-item families the catalog window
 * wears); CSS here only positions and sizes those pieces, it never
 * approximates game art with gradients or invented shapes. */

.wgf-hp {
  position: absolute;
  top: 64px;
  right: 14px;
  width: 232px;
  max-height: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  z-index: 6;
  border-image: url(/assets/ui/housing/housing-wood-frame.png) 40 / 19px stretch;
  border-width: 19px;
  border-style: solid;
  background: url(/assets/ui/housing/housing-wood-frame-basic-background.png)
              repeat left top / 64px 64px;
  transition: transform .18s ease, opacity .18s ease;
}

.wgf-hp.is-indoors,
.wgf-hp.is-hidden {
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
}

.wgf-hp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 9px;
  background: url(/assets/ui/housing/housing-basic-panel-gradient-header-bg-2x.png)
              repeat-x left top / auto 100%;
}

.wgf-hp-head__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: url(/assets/ui/housing/decor-ability-exterior-default.png)
              center / contain no-repeat;
}

.wgf-hp-head__title {
  flex: 1 1 auto;
  color: #ffe9b0;
  font-family: var(--font-game);
  font-size: 16px;
  letter-spacing: .04em;
  text-shadow: 1px 1px 0 #000;
}

.wgf-hp-head__close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: url(/assets/ui/housing/housing-floor-door-2x.png)
              center / contain no-repeat;
  cursor: pointer;
}

.wgf-hp-head__close:hover {
  background-image: url(/assets/ui/housing/housing-floor-door-inactive-2x.png);
}

.wgf-hp-body {
  overflow-y: auto;
  padding: 6px 8px 10px;
}

.wgf-hp-sec {
  margin: 0 0 8px;
}

.wgf-hp-label {
  margin: 4px 2px 5px;
  color: #f3dfae;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .02em;
  text-shadow: 1px 1px 0 #000;
}

.wgf-hp-note {
  margin: -2px 2px 5px;
  color: #b9a67c;
  font-size: 11px;
}

.wgf-hp-opts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Option rows wear the catalog list-item art: default / active / pressed. */
.wgf-hp-opt {
  display: block;
  width: 100%;
  min-height: 26px;
  padding: 4px 10px;
  border: 0;
  box-sizing: border-box;
  background: url(/assets/ui/housing/catalog-list-item-default-2x.png)
              left top / 100% 100% no-repeat;
  color: #e8d9b0;
  font-family: var(--font-game);
  font-size: 13px;
  text-align: left;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
}

.wgf-hp-opt:hover {
  background-image: url(/assets/ui/housing/catalog-list-item-pressed-2x.png);
}

.wgf-hp-opt.is-active {
  background-image: url(/assets/ui/housing/catalog-list-item-active-2x.png);
  color: #ffd76a;
}

.wgf-hp-opt.is-off {
  opacity: .45;
  cursor: default;
}

.wgf-hp-opt.is-off:hover {
  background-image: url(/assets/ui/housing/catalog-list-item-default-2x.png);
}

@media (max-height: 640px) {
  .wgf-hp { max-height: calc(100% - 110px); }
}