/* The status colours repeat .hcloud-availability-struct on purpose: another badge script that also marks
   «Availability» lines (the dedicated server estimator) loads later and must not repaint these cards. */
isp-list-cell-content.hcloud-availability {
  display: block;
  grid-column: 1 / -1;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hcloud-availability-struct {
  --spacecore-availability-border: #67bf83;
  --spacecore-availability-text: #176538;
  --spacecore-availability-dot: #22a05a;
  --spacecore-availability-dot-shadow: rgb(34 160 90 / 18%);

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 2px;
  align-items: center;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 6px 9px;
  border: 1px solid var(--spacecore-availability-border);
  border-radius: 6px;
  background: transparent;
}

.hcloud-availability-struct.hcloud-availability--list {
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  width: 136px !important;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  padding: 5px 7px;
}

isp-list-cell-content.hcloud-availability.hcloud-availability--list {
  grid-column: auto;
  flex: 0 1 136px;
  width: 136px;
  max-width: 100%;
}

.hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--success {
  --spacecore-availability-border: #67bf83;
  --spacecore-availability-text: #176538;
  --spacecore-availability-dot: #22a05a;
  --spacecore-availability-dot-shadow: rgb(34 160 90 / 18%);
}

.hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--warning {
  --spacecore-availability-border: #d9a328;
  --spacecore-availability-text: #6b4a08;
  --spacecore-availability-dot: #d58a00;
  --spacecore-availability-dot-shadow: rgb(213 138 0 / 18%);
}

.hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--danger {
  --spacecore-availability-border: #df6e61;
  --spacecore-availability-text: #8b2d22;
  --spacecore-availability-dot: #d64232;
  --spacecore-availability-dot-shadow: rgb(214 66 50 / 18%);
}

:root[dark="true"]
  .hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--success {
  --spacecore-availability-border: #4eb876;
  --spacecore-availability-text: #77d89a;
  --spacecore-availability-dot: #52cf80;
  --spacecore-availability-dot-shadow: rgb(82 207 128 / 20%);
}

:root[dark="true"]
  .hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--warning {
  --spacecore-availability-border: #d3a23a;
  --spacecore-availability-text: #efc769;
  --spacecore-availability-dot: #e9ad2f;
  --spacecore-availability-dot-shadow: rgb(233 173 47 / 20%);
}

:root[dark="true"]
  .hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--danger {
  --spacecore-availability-border: #d9665b;
  --spacecore-availability-text: #f08b82;
  --spacecore-availability-dot: #eb7065;
  --spacecore-availability-dot-shadow: rgb(235 112 101 / 20%);
}

.hcloud-availability-struct .isp-struct-cell__data,
.hcloud-availability-struct .isp-struct-cell__msg {
  color: var(--spacecore-availability-text) !important;
  font-size: 13px !important;
  line-height: 16px;
  overflow-wrap: break-word;
  word-break: normal !important;
}

.hcloud-availability-struct
  > isp-struct-cell:first-child
  .isp-struct-cell__data,
.hcloud-availability-struct
  > isp-struct-cell:first-child
  .isp-struct-cell__msg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.hcloud-availability-struct
  > isp-struct-cell:first-child
  .isp-struct-cell__data::before,
.hcloud-availability-struct
  > isp-struct-cell:first-child
  .isp-struct-cell__msg::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--spacecore-availability-dot);
  box-shadow: 0 0 0 3px var(--spacecore-availability-dot-shadow);
}

.hcloud-availability-struct
  > isp-struct-cell:last-child
  .isp-struct-cell__data,
.hcloud-availability-struct
  > isp-struct-cell:last-child
  .isp-struct-cell__msg {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  text-align: right;
  font-weight: 500;
}

.hcloud-availability-struct.hcloud-availability--list
  > isp-struct-cell:last-child
  .isp-struct-cell__data,
.hcloud-availability-struct.hcloud-availability--list
  > isp-struct-cell:last-child
  .isp-struct-cell__msg {
  justify-content: flex-start;
  text-align: left;
}

/* List view: the line under the «Order» button of its tariff (the script moves it there and hides the cell). */
.hcloud-availability-struct.hcloud-availability-struct.hcloud-availability--moved {
  display: none !important;
}

/* Out of the flow: the first row keeps the height of the button, the data center row stays right under it. */
.hcloud-availability-anchor {
  position: relative;
}

.hcloud-availability-slot {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
}

.hcloud-availability-badge {
  --spacecore-availability-border: #67bf83;
  --spacecore-availability-text: #176538;
  --spacecore-availability-dot: #22a05a;
  --spacecore-availability-dot-shadow: rgb(34 160 90 / 18%);

  box-sizing: border-box;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--spacecore-availability-border);
  border-radius: 6px;
  color: var(--spacecore-availability-text);
  font-size: 13px;
  line-height: 16px;
  overflow-wrap: break-word;
}

.hcloud-availability-badge.hcloud-availability--warning {
  --spacecore-availability-border: #d9a328;
  --spacecore-availability-text: #6b4a08;
  --spacecore-availability-dot: #d58a00;
  --spacecore-availability-dot-shadow: rgb(213 138 0 / 18%);
}

.hcloud-availability-badge.hcloud-availability--danger {
  --spacecore-availability-border: #df6e61;
  --spacecore-availability-text: #8b2d22;
  --spacecore-availability-dot: #d64232;
  --spacecore-availability-dot-shadow: rgb(214 66 50 / 18%);
}

:root[dark="true"] .hcloud-availability-badge.hcloud-availability--success {
  --spacecore-availability-border: #4eb876;
  --spacecore-availability-text: #77d89a;
  --spacecore-availability-dot: #52cf80;
  --spacecore-availability-dot-shadow: rgb(82 207 128 / 20%);
}

:root[dark="true"] .hcloud-availability-badge.hcloud-availability--warning {
  --spacecore-availability-border: #d3a23a;
  --spacecore-availability-text: #efc769;
  --spacecore-availability-dot: #e9ad2f;
  --spacecore-availability-dot-shadow: rgb(233 173 47 / 20%);
}

:root[dark="true"] .hcloud-availability-badge.hcloud-availability--danger {
  --spacecore-availability-border: #d9665b;
  --spacecore-availability-text: #f08b82;
  --spacecore-availability-dot: #eb7065;
  --spacecore-availability-dot-shadow: rgb(235 112 101 / 20%);
}

.hcloud-availability-badge__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.hcloud-availability-badge__name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--spacecore-availability-dot);
  box-shadow: 0 0 0 3px var(--spacecore-availability-dot-shadow);
}

.hcloud-availability-badge__text {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}