.item {
  @apply text-primary;
}

.buttonIcon {
  @apply hidden text-sky-900 text-2xl mr-4 h-6 rounded-full font-normal;

  &:focus {
    @apply widget-shadow-lightblue outline-none;
  }
}

.active,
.item:hover {
  @apply bg-storm-200;
}

.item:hover .buttonIcon {
  @apply block;
}

.isExpanded {
  @apply bg-[#fafbfc];
  .buttonIcon {
    @apply block;
  }
}

.isExpanded .tableName {
  @apply font-normal;
}

.isExpanded .table {
  @apply font-normal bg-storm-200;
}

.table {
  @apply flex items-center text-sm;
  &:hover {
    @apply bg-storm-200;
  }
}

.tableName {
  @apply hidden;

  @screen lg {
    @apply flex p-3 text-white w-full text-sm;

    svg {
      @apply inline-block text-sm mt-1 mr-2;
    }

    &:focus {
      @apply outline-none;

      svg {
        @apply widget-shadow-lightblue;
      }
    }
  }
}

.tableModified {
  @apply text-yellow-200;
}

.tableCreated {
  @apply text-green-300;
}

.mobileTableLink {
  @apply flex justify-between mx-2 p-3 text-link-1 font-normal w-full text-sm lg:hidden;
}

.right {
  @apply flex items-center ml-auto mr-6;

  a {
    @apply hidden lg:block;
  }
}

.tableStatus {
  @apply text-coral-400 bg-white rounded-full px-2 mr-3 font-normal;
}

.statusIndicator {
  @apply flex items-end absolute right-4;
}
