// section style
.section {
  @apply py-20;
}

// container
.container {
  @apply max-w-[1000px] px-4 md:px-8;
}

// page heading
.page-heading {
  @apply mb-20 text-center font-bold leading-10;
  &:after {
    @apply mx-auto mt-4 block h-1 w-10 rounded-full bg-primary content-[''];
  }
}

// form style
.form-inputs * {
  @apply mb-5 leading-10;
}

// image cover
.img-cover {
  @apply leading-none;
  span {
    @apply h-full w-full;
  }
  img {
    @apply object-cover;
  }
}

// author-image
.author-image {
  @apply mr-2 align-top;
  img {
    @apply max-h-[25px] max-w-[25px] rounded-full;
  }
}

// social icon style
.social-icons {
  @apply space-x-4;
  li {
    @apply inline-block;
    a {
      @apply block h-11 w-11 rounded-lg border border-light bg-transparent text-center text-white transition hover:border-primary hover:bg-primary;
      svg {
        @apply m-auto h-11 text-base;
      }
    }
  }
}

.social-icons-simple {
  @apply space-x-2;
  li {
    @apply inline-block;
    a {
      @apply block p-3 text-dark transition hover:text-primary;
      svg {
        @apply text-lg;
      }
    }
  }
}

.social-share {
  @apply space-x-1;
  li {
    @apply inline-block;
    a {
      @apply block p-3 transition transition duration-300 hover:text-primary;
    }
  }
}

// form style
.form-input,
.form-textarea {
  @apply rounded-md border-border py-3 text-text focus:border-primary focus:ring-transparent;
}

// content style
.content {
  @apply prose max-w-none prose-headings:font-bold prose-h1:mb-4 prose-h1:text-h1-sm prose-h2:mb-4 prose-h2:mt-4 prose-h2:text-h2-sm prose-h3:mt-4 prose-h3:text-h3-sm prose-h4:mt-4 prose-h5:mb-4 prose-h6:mb-6 prose-blockquote:rounded-lg prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-7 prose-blockquote:py-3 prose-blockquote:text-lg prose-blockquote:leading-8 prose-pre:px-6 prose-pre:py-5 md:prose-h1:text-h1 md:prose-h2:text-h2 md:prose-h3:text-h3;
}

// tab
.tab {
  @apply overflow-hidden rounded-lg border border-border;
  &-nav {
    @apply flex border-b border-border bg-theme-light;
    @apply m-0 #{!important};
    @apply list-none #{!important};

    &-item {
      @apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-dark opacity-80;
      @apply my-0 #{!important};
      @apply px-8 #{!important};

      &.active {
        @apply border-b-[3px] border-dark opacity-100;
      }
    }
  }
  &-content {
    &-panel {
      @apply p-8;
      p {
        @apply mb-0;
      }
      &.active {
        @apply block;
      }
    }
  }
}

// accordion
.accordion {
  @apply mb-6 overflow-hidden rounded-lg border border-border bg-theme-light;
  &-header {
    @apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark;
  }
  &-icon {
    @apply ml-auto h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
  }
  &-content {
    @apply max-h-0 overflow-hidden px-8 py-0;
  }
  &.active {
    .accordion-icon {
      @apply rotate-0;
    }
    .accordion-content {
      @apply max-h-screen;
    }
  }
}

// notice
.notice {
  @apply mb-6 rounded-lg border px-8 py-6;
  &-head {
    @apply flex items-center;
    svg {
      @apply mr-3;
    }
    p {
      @apply font-secondary text-xl font-semibold text-dark;
    }
  }
  .notice-body {
    @apply mt-3;
    p {
      @apply my-0;
    }
  }

  &.note {
    @apply text-[#1B83E2];
    @apply border-current;
  }

  &.tip {
    @apply text-[#40D294];
    @apply border-current;
  }

  &.info {
    @apply text-[#E3A72C];
    @apply border-current;
  }

  &.warning {
    @apply text-[#DB2C23];
    @apply border-current;
  }
}

// footer
footer p a {
  @apply transition-all duration-200 hover:text-white;
}
