@use "@/common/styles/colors" as *

.node-item
  border: 2px solid $light-gray
  background-color: var(--glass-bg)
  backdrop-filter: blur(16px)
  -webkit-backdrop-filter: blur(16px)
  border-radius: 15px
  display: flex
  width: 50rem
  cursor: pointer
  padding: 1rem 1.5rem
  justify-content: space-between
  align-items: center
  user-select: none

.hover-green:hover
  border: 2px solid $green

.hover-orange:hover
  border: 2px solid $orange

.hover-red:hover
  border: 2px solid $red

.node-info-area
  display: flex
  align-items: center
  gap: 1rem

.node-info-area svg
  font-size: 30pt

.node-info-area h1
  margin: 0
  font-size: 16pt

.node-info-area p
  margin: 0
  font-size: 11pt
  color: $subtext

.node-info
  display: flex
  flex-direction: column
  align-items: flex-start

.node-info *
  max-width: 11rem
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

.speed-area
  display: flex
  gap: 1rem

.icon-text
  display: flex
  gap: 0.5rem
  align-items: center

.icon-text h2
  margin: 0
  color: $subtext

.speed-item
  display: flex
  gap: 0.5rem

.speed-item svg
  font-size: 24pt

.speed-item h1
  margin: 0
  font-size: 20pt
  color: $subtext

.speed-icon
  font-size: 28pt

@media screen and (max-width: 862px)
  .node-item
    width: calc(20vw + 8rem)
    flex-direction: column
    gap: 1rem

  .speed-area
    flex-direction: column
    gap: 0.5rem
  .icon-text h2
    font-size: 14pt