@import "../../app/vars.less";

@pcinfo-font-size: 20vh;
@pcinfo-font-size-compact: 10vh;

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: @info-color;
  align-items: center;
  border: solid @background-color;
  border-width: 0 0 0 4px;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
}

.info--compact {
  .info;
  flex-direction: row;
  border-width: 2px;
  max-width: none;
  flex: 1;
}

.info span {
  align-self: center;
}

.info__pc {
  display: flex;
  flex-direction: column;
}

.info__pc--compact {
  .info__pc;
  line-height: 1;
  margin: 4px;
  flex-direction: row;
}

.info__pc .ant-typography,
.info__pc--compact .ant-typography {
  display: flex;
  color: @background-color;
}

.check-update.ant-btn {
  height: auto;
  width: auto;
  padding: 0 2px;
  margin-left: 6px;
  line-height: unset;
}

.info__hostname {
  font-size: @pcinfo-font-size;
  font-weight: bold;
  margin: 0.1rem 0.3rem;
  height: @pcinfo-font-size;
  align-items: center;
}

.info__hostname--compact {
  .info__hostname;
  font-size: @pcinfo-font-size-compact;
  height: auto;
}

.info__ipaddr {
  font-size: @pcinfo-font-size;
  margin: 0.1rem 0.3rem;
  height: @pcinfo-font-size;
  align-items: center;
  align-self: center;
  transition: all 0.2s;
}

.info__ipaddr--compact {
  .info__ipaddr;
  font-size: @pcinfo-font-size-compact;
  height: auto;
}

.info__ipaddr:active {
  opacity: 0;
}

.info__no_ipaddr {
  color: white;
  font-weight: bold;
  background-color: red;
}