ujiro99/tlt

@import '../css/mixin.css';

body {
  margin: 0;
}

#popup {
  width: 450px;
  height: 100%;
  overflow-x: hidden;

  @apply text-sm;
  @apply text-black;
  @apply antialiased;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.task-textarea {
  position: relative;
  padding: 20px 12px 30px 12px;

  textarea {
    @apply w-full;
    @apply p-4;
    @apply text-gray-900;
    @apply outline-none;
    @apply resize-none;
    @apply bg-gray-100;
    @apply font-mono;
    @apply rounded-md;
    line-height: 2;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 4px;
  }

  &__section-title {
    @mixin section-title;

    & > .Icon {
      @apply fill-gray-400;
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 4px;
      margin-bottom: 2px;
    }
  }

  textarea + &__section-title {
    margin-top: 20px;
  }
}

.task-container {
  padding: 12px 16px 30px 16px;
}

.debug {
  & summary {
    cursor: pointer;
    transition: background 0.4s ease-out;
    padding: 0.4em;
    border-radius: 4px;
    margin-bottom: 4px;

    &:hover {
      background: #f0f0f0;
    }
  }

  &__label {
    font-size: 12px;
    line-height: 1;
    background: #f0f0f0;
    padding: 1em;
    margin-bottom: 4px;
    border-radius: 4px;
  }

  &__content {
    padding: 0 1em;
  }
}