.box {
  max-width: 580px;
  min-width: 200px;
  width: 70%;
  display: flex;
  flex-direction: column;
  background-color: var(--ui-primary-color);
  color: var(--ui-on-primary-color);
}

.categories {
  padding: space(1) 0 space(1) space(1);
  margin: space(-1) 0 space(2) space(-1);
  overflow-y: auto;
}

.box .categoryName {
  font-weight: 700;
  border-bottom: solid 1px var(--ui-on-primary-color-lighter);
  margin: space(1) 0;
  padding-bottom: space(1);
}

.types {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 33.3333%;
}

.type {
  composes: unstyledButton from './buttons.module.css';
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: space(2) space(2) space(2) space(10);
  margin-bottom: space(1);
  color: inherit;
  background-color: transparent;
}

.type:not([disabled]):hover,
.type:not([disabled]):focus {
  background-color: var(--ui-on-primary-color-lightest);
}

.categories li:not(:has(.type:not([disabled]))) .categoryName,
.type[disabled] {
  opacity: 0.3;
}

.typePictogram {
  position: absolute;
  top: space(2);
  left: space(2);
  opacity: 0.8;
}

.type:not([disabled]):hover .typePictogram,
.type:not([disabled]):focus .typePictogram {
  opacity: 1;
}

.typeName {
  font-weight: 500;
}

.typeDescription {
  display: block;
  font-size: 11px;
  color: var(--ui-on-primary-color-light);
  margin-top: space(1);
}

.box .close {
  color: inherit;
  border-color: var(--ui-on-primary-color-lightest);
}

.box .close:hover {
  border-color: var(--ui-on-primary-color) !important;
}
