.iconAndSelector {
  -webkit-app-region: no-drag;
  @apply hidden;
  @screen lg {
    @apply flex items-center w-64;
  }
}

.dbIcon {
  @apply mr-3 w-4 h-4;
}

.selector {
  @apply rounded px-4 py-1 bg-[#3C4D5A] min-w-56 flex items-center justify-between font-normal;
}

.container {
  @apply flex max-w-[42rem] flex-col min-w-[36rem];
}

.top,
.middle {
  @apply flex;
}

.top svg {
  @apply text-sky-400 w-5 h-5;
}

.middle {
  @apply min-h-32;
}

.left {
  @apply w-1/2 border-r border-stone-100;
}

.right {
  @apply w-1/2;
}

.header {
  @apply flex items-center  border-b border-stone-100 p-4 justify-between;
  span {
    @apply font-semibold text-sm text-storm-200;
  }
}

.connection {
  @apply h-16 flex-col items-start w-full px-4 border-b border-storm-50 border-opacity-40;
}

.connection:last-child {
  @apply border-none rounded-bl;
}

.icons {
  @apply flex;
}

.wrench {
  @apply w-5 h-5 border border-sky-400 rounded-full p-[0.1rem] -rotate-90;
}

.top .plus {
  @apply ml-2 w-[21px] h-[21px];
}

.connectionTop {
  @apply flex items-center justify-between;
}

.nameAndLabel {
  @apply flex items-center;
}

.connectionName {
  @apply text-left;
}

.doltLabels {
  @apply flex;
}

.label,
.local {
  @apply text-sm px-3 h-5 bg-[#EFF2F3] rounded-full flex items-center justify-center ml-4;
  img {
    @apply h-[0.65rem];
  }
}

.local {
  @apply text-mint-200 font-bold;
}

.connectionUrl {
  @apply text-storm-200 text-xs font-normal text-left py-1;
}

.dbItem {
  @apply text-storm-500 font-semibold text-sm py-2 px-4 flex w-full items-center justify-between;
  svg {
    @apply font-normal h-3;
  }
}

.selected,
.connection:hover,
.dbItem:hover {
  @apply bg-storm-50 bg-opacity-50;
}

.selected .connectionName,
.connection:hover .connectionName,
.dbItem:hover {
  @apply text-storm-600;
}

.viewing {
  @apply w-4 text-link-1 ml-2;
}

.arrow {
  @apply text-sky-400 w-3 h-3;
}

.err {
  @apply ml-4;
}

.link {
  @apply text-sky-500 justify-between;
}

.connectionError {
  @apply flex items-center text-white font-normal;
  &:hover {
    @apply text-sky-400;
  }
}
