ujiro99/tlt

.Heading {
  $this: .Heading;
  @apply w-full;
  @apply py-2;
  @apply font-bold;
  @apply relative;
  @apply text-gray-700;
  @apply leading-normal;
  @apply tracking-wide;
  @apply cursor-pointer;
  @apply flex;
  @apply items-center;

  padding-left: 2px;
  padding-right: 12px;

  &__tagmenu,
  &__add-todo {
    height: 22px;
    opacity: 0;
    z-index: calc(var(--z-index-picker) - 1);

    @apply duration-200;
    @apply transition-opacity;
  }

  &__tagmenu {
    margin-left: 12px;
  }

  &__add-todo {
    margin-left: 4px;
  }

  li:hover &__tagmenu,
  li:hover &__add-todo {
    opacity: 1;
  }

  &__add-button {
    --shadow-color: 0, 0, 0;

    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 1px;

    & > .Icon {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      @apply fill-gray-400;
      @apply bg-gray-300;
      @apply transition;
      @apply duration-300;
    }

    &:hover {
      > .Icon {
        opacity: 0.8;
        @apply fill-gray-600;
        @apply drop-shadow-md;
      }
    }
  }

  @at-root {
    .item-wrapper__drag + $(this) {
      padding-left: 20px;
    }
  }

  & > * {
    user-select: none;
  }

  h1 {
    position: relative;
    z-index: 0;

    &:after {
      @apply bg-gray-200;
      content: '';
      position: absolute;
      z-index: -1;
      left: -6px;
      bottom: 0;
      width: calc(100% + 10px);
      height: 0.6rem;
      border-radius: 2px;
    }
  }
}