<script setup lang="ts">
const { onceError } = useImageError()

const contactSearchOpen = ref(false)
const activeTab = ref('inbox')
const selectedConversationId = ref(1)
const selectedConversationList = ref<number[]>([])
const mobileMessageOpen = ref(true)
const mobileSidebarOpen = ref(false)

const isAllChecked = computed(() => {
  return selectedConversationList.value.length === 10
})

const toggleSelection = () => {
  if (isAllChecked.value) {
    selectedConversationList.value.splice(0, selectedConversationList.value.length)
  }
  else {
    selectedConversationList.value.splice(0, selectedConversationList.value.length)
    selectedConversationList.value.push(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  }
}

watch(selectedConversationId, () => {
  mobileMessageOpen.value = true
})

useHead({
  title: 'Apps 2 - Sidebar - Vuero',
})
</script>

<template>
  <MinimalLayout>
    <div class="inbox-wrapper">
      <div class="wrapper-inner">
        <!--Inbox sidebar-->
        <div
          class="inbox-sidebar"
          :class="[mobileSidebarOpen && 'mobile-active']"
        >
          <!-- Header -->
          <div class="header-area">
            <div class="inbox-title">
              <RouterLink
                to="/"
                class="inbox-brand"
              >
                <AnimatedLogo
                  width="36px"
                  height="36px"
                />
              </RouterLink>
              <span>Inbox</span>

              <VDarkmodeToggle />
            </div>

            <VDropdown right class="inbox-dropdown">
              <template #button="{ toggle }">
                <button
                  class="button"
                  @click="toggle"
                >
                  <span class="icon is-small">
                    <VIcon
                      icon="lucide:more-vertical"
                    />
                  </span>
                </button>
              </template>

              <template #content>
                <a class="dropdown-item">
                  <VIcon
                    icon="lucide:refresh-cw"
                  />
                  <span>Refresh</span>
                </a>
                <a class="dropdown-item">
                  <VIcon
                    icon="lucide:bell"
                  />
                  <span>Notifications</span>
                </a>
                <a class="dropdown-item">
                  <VIcon
                    icon="lucide:user-plus"
                  />
                  <span>Invite People</span>
                </a>
                <a class="dropdown-item">
                  <VIcon
                    icon="lucide:settings"
                  />
                  <span>Settings</span>
                </a>
              </template>
            </VDropdown>
            <a
              class="inbox-action inbox-close-sidebar-mobile"
              aria-label="Close"
              role="button"
              tabindex="0"
              @keydown.enter.prevent="mobileSidebarOpen = false"
              @click="mobileSidebarOpen = false"
            >
              <VIcon
                icon="lucide:x"
              />
            </a>
          </div>
          <!--Inner-->
          <div class="sidebar-inner">
            <!--Inner menu-->
            <div class="inner-menu">
              <a class="button compose-button is-fullwidth">Compose</a>
              <div class="inbox-menu">
                <ul>
                  <li>
                    <a
                      :class="[activeTab === 'inbox' && 'is-active']"
                      tabindex="0"
                      role="button"
                      @keydown.enter.prevent="activeTab = 'inbox'"
                      @click="activeTab = 'inbox'"
                    >
                      <VIcon
                        icon="lucide:mail"
                      />
                      <span>Inbox</span>
                      <span class="tag">24</span>
                    </a>
                  </li>
                  <li>
                    <a
                      :class="[activeTab === 'drafts' && 'is-active']"
                      tabindex="0"
                      role="button"
                      @keydown.enter.prevent="activeTab = 'drafts'"
                      @click="activeTab = 'drafts'"
                    >
                      <VIcon
                        icon="lucide:file-text"
                      />
                      <span>Drafts</span>
                      <span class="tag">2</span>
                    </a>
                  </li>
                  <li>
                    <a
                      :class="[activeTab === 'sent' && 'is-active']"
                      tabindex="0"
                      role="button"
                      @keydown.enter.prevent="activeTab = 'sent'"
                      @click="activeTab = 'sent'"
                    >
                      <VIcon
                        icon="lucide:send"
                      />
                      <span>Sent</span>
                      <span class="tag">7</span>
                    </a>
                  </li>
                  <li>
                    <a
                      :class="[activeTab === 'trash' && 'is-active']"
                      tabindex="0"
                      role="button"
                      @keydown.enter.prevent="activeTab = 'trash'"
                      @click="activeTab = 'trash'"
                    >
                      <VIcon
                        icon="lucide:trash-2"
                      />
                      <span>Trash</span>
                      <span class="tag">18</span>
                    </a>
                  </li>
                  <li>
                    <a
                      :class="[activeTab === 'span' && 'is-active']"
                      tabindex="0"
                      role="button"
                      @keydown.enter.prevent="activeTab = 'span'"
                      @click="activeTab = 'span'"
                    >
                      <VIcon
                        icon="lucide:alert-octagon"
                      />
                      <span>Spam</span>
                      <span class="tag">29</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <!--Scroll menu-->
            <div class="scroll-menu">
              <div class="title-wrap">
                <h3 :class="[contactSearchOpen && 'is-hidden']">
                  Contacts
                </h3>
                <div
                  :class="[!contactSearchOpen && 'is-hidden']"
                  class="control has-icon"
                >
                  <input
                    type="text"
                    class="input"
                    placeholder="Search Contacts..."
                  >
                  <div class="form-icon">
                    <VIcon
                      icon="lucide:search"
                    />
                  </div>
                </div>
                <a
                  :class="[contactSearchOpen && 'is-hidden']"
                  class="button searcv-button"
                  aria-label="Search"
                >
                  <span
                    class="icon is-small"
                    tabindex="0"
                    role="button"
                    @keydown.enter.prevent="contactSearchOpen = true"
                    @click="contactSearchOpen = true"
                  >
                    <VIcon
                      icon="lucide:search"
                    />
                  </span>
                </a>
                <a
                  :class="[!contactSearchOpen && 'is-hidden']"
                  class="button cancel-searcv-button"
                  aria-label="Close"
                >
                  <span
                    class="icon is-small"
                    tabindex="0"
                    role="button"
                    @keydown.enter.prevent="contactSearchOpen = true"
                    @click="contactSearchOpen = false"
                  >
                    <VIcon
                      icon="lucide:x"
                    />
                  </span>
                </a>
              </div>
              <div class="contact-list has-slimscroll">
                <!--Contact-->
                <div class="contact-block">
                  <img
                    src="https://media.cssninja.io/content/avatars/7.jpg"
                    alt=""
                    @error.once="onceError($event, 150)"
                  >
                  <div class="contact-meta">
                    <span>Alice Carasca</span>
                    <span>alice@vuero.io</span>
                  </div>
                </div>
                <!--Contact-->
                <div class="contact-block">
                  <img
                    src="https://media.cssninja.io/content/avatars/25.jpg"
                    alt=""
                    @error.once="onceError($event, 150)"
                  >
                  <div class="contact-meta">
                    <span>Melany Wallace</span>
                    <span>melany@vuero.io</span>
                  </div>
                </div>
                <!--Contact-->
                <div class="contact-block">
                  <img
                    src="https://media.cssninja.io/content/avatars/18.jpg"
                    alt=""
                    @error.once="onceError($event, 150)"
                  >
                  <div class="contact-meta">
                    <span>Esteban Castellanos</span>
                    <span>esteban@vuero.io</span>
                  </div>
                </div>
                <!--Contact-->
                <div class="contact-block">
                  <img
                    src="https://media.cssninja.io/content/avatars/32.jpg"
                    alt=""
                    @error.once="onceError($event, 150)"
                  >
                  <div class="contact-meta">
                    <span>Jonathan Krugger</span>
                    <span>jonathan@vuero.io</span>
                  </div>
                </div>
                <!--Contact-->
                <div class="contact-block">
                  <img
                    src="https://media.cssninja.io/content/avatars/38.jpg"
                    alt=""
                    @error.once="onceError($event, 150)"
                  >
                  <div class="contact-meta">
                    <span>Christie Dallas</span>
                    <span>christie@vuero.io</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--Messages list-->
        <div class="inbox-messages">
          <div class="header-area">
            <div class="actions">
              <a
                class="inbox-action mobile-menu-action"
                aria-label="Open messages list"
                tabindex="0"
                role="button"
                @keydown.enter.prevent="mobileSidebarOpen = true"
                @click="mobileSidebarOpen = true"
              >
                <VIcon
                  icon="lucide:chevron-right"
                />
              </a>
              <a
                class="inbox-action check-all-action"
                :class="[isAllChecked && 'is-checked']"
                aria-label="Toggle selection"
                tabindex="0"
                role="button"
                @keydown.enter.prevent="toggleSelection"
                @click="toggleSelection"
              >
                <VIcon
                  icon="lucide:check"
                />
              </a>
            </div>
            <div class="actions">
              <div class="control inbox-search has-icon">
                <input
                  type="text"
                  class="input is-rounded"
                  placeholder="Search Inbox..."
                >
                <div class="form-icon">
                  <VIcon
                    icon="lucide:search"
                  />
                </div>
              </div>

              <VDropdown right class="inbox-dropdown">
                <template #button="{ toggle }">
                  <button
                    class="button"
                    @click="toggle"
                  >
                    <span class="icon is-small">
                      <VIcon
                        icon="lucide:more-vertical"
                      />
                    </span>
                  </button>
                </template>

                <template #content>
                  <a class="dropdown-item">
                    <VIcon
                      icon="lucide:check"
                    />
                    <span>Mark all as read</span>
                  </a>
                  <a class="dropdown-item">
                    <VIcon
                      icon="lucide:eye-off"
                    />
                    <span>Hide read</span>
                  </a>
                  <hr class="dropdown-divider">
                  <a class="dropdown-item">
                    <VIcon
                      icon="lucide:calendar"
                    />
                    <span>Sort by date</span>
                  </a>
                  <a class="dropdown-item">
                    <VIcon
                      icon="lucide:user"
                    />
                    <span>Sort by user</span>
                  </a>
                </template>
              </VDropdown>
            </div>
          </div>
          <!--Messages-->
          <div class="messages-list has-slimscroll">
            <!--messages list partial-->
            <InboxMessagesList
              v-model:conversationId="selectedConversationId"
              v-model:selectedConversationList="selectedConversationList"
            />
          </div>
        </div>

        <!--Loader-->
        <div class="inbox-message-overlay">
          <div class="loader is-loading" />
        </div>

        <!--Message details 1-->
        <Message1
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 1"
        />

        <!--Message details 2-->
        <Message2
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 2"
        />

        <!--Message details 3-->
        <Message3
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 3"
        />

        <!--Message details 4-->
        <Message4
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 4"
        />

        <!--Message details 5-->
        <Message5
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 5"
        />

        <!--Message details 6-->
        <Message6
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 6"
        />

        <!--Message details 7-->
        <Message7
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 7"
        />

        <!--Message details 8-->
        <Message8
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 8"
        />

        <!--Message details 9-->
        <Message9
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 9"
        />

        <!--Message details 10-->
        <Message10
          v-model:mobile-message-open="mobileMessageOpen"
          :selected="selectedConversationId === 10"
        />
      </div>
    </div>
  </MinimalLayout>
</template>

<style lang="scss">
.inbox-wrapper {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;

  .wrapper-inner {
    position: relative;
    height: 100%;
    width: 100%;

    .inbox-sidebar {
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      height: 100%;
      width: 20%;
      background: var(--white);
      border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);

      .header-area {
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
        padding: 0 20px;

        .inbox-title {
          display: flex;
          align-items: center;
          font-family: var(--font-alt);
          font-size: 1.4rem;
          font-weight: 600;
          color: var(--dark-text);
          width: 100%;
          max-width: 100%;

          .inbox-brand {
            margin-inline-end: 16px;

            img {
              height: 40px;
              width: 40px;
              min-width: 40px;
            }
          }

          label {
            display: block;
            margin-inline-start: auto;
            transform: scale(0.45);
          }
        }

        .inbox-close-sidebar-mobile {
          display: none;
        }
      }

      .sidebar-inner {
        position: relative;
        width: 100%;
        height: calc(100% - 80px);

        .inner-menu {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          padding: 20px;
          width: 100%;

          .compose-button {
            height: 40px;
            line-height: 1.8;
            background: var(--primary);
            border-color: var(--primary);
            color: var(--smoke-white);
            font-weight: 500;
            font-family: var(--font);

            &:hover,
            &:focus {
              opacity: 0.8;
              box-shadow: var(--primary-box-shadow);
            }
          }

          .inbox-menu {
            padding: 20px 0;

            ul {
              li {
                a {
                  font-family: var(--font);
                  display: flex;
                  align-items: center;
                  padding: 8px 12px;
                  border-radius: 100px;

                  &.is-active {
                    background: color-mix(in oklab, var(--fade-grey), white 3%);

                    span,
                    .iconify {
                      color: var(--dark-text);
                      font-weight: 500;
                    }

                    .iconify {
                      color: var(--primary);
                    }

                    .tag {
                      display: inline;
                    }
                  }

                  .iconify {
                    color: var(--muted-grey);
                  }

                  .iconify {
                    height: 16px;
                    width: 16px;
                    color: var(--light-text);
                  }

                  span {
                    display: block;
                    padding: 0 20px;
                    color: var(--muted-grey);
                  }

                  .tag {
                    display: none;
                    margin-inline-start: auto;
                    margin-bottom: 0;
                    font-size: 0.85rem;
                    height: 22px;
                    background: var(--secondary);
                    padding: 0 12px;
                    line-height: 1.8;
                    color: var(--smoke-white) !important;
                    border-radius: 100px;
                  }
                }
              }
            }
          }
        }

        .scroll-menu {
          position: absolute;
          bottom: 0;
          inset-inline-start: 0;
          height: calc(100% - 304px);
          width: 100%;
          border-top: 1px solid var(--fade-grey);
          overflow-y: auto;

          .title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            padding: 0 20px;

            h3 {
              font-family: var(--font-alt);
              font-weight: 600;
              color: var(--dark-text);
            }

            .control {
              position: relative;
              flex-grow: 2;

              input {
                height: 32px;
                padding-inline-start: 32px;
              }

              .form-icon {
                position: absolute;
                top: 0;
                inset-inline-start: 0;
                height: 32px;
                width: 32px;
                display: flex;
                justify-content: center;
                align-items: center;

                .iconify {
                  color: var(--placeholder);
                  transition: color 0.3s;
                }
              }
            }

            .button {
              height: 36px;
              width: 36px;
              border: none;
              display: flex;
              justify-content: center;
              align-items: center;

              &:hover,
              &:focus {
                .iconify {
                  color: var(--dark-text);
                }
              }

              .iconify {
                color: var(--placeholder);
                transition: color 0.3s;

                &.material-icons {
                  font-size: 16px;
                }
              }
            }
          }

          .contact-list {
            position: relative;
            top: 0;
            width: 100%;
            height: calc(100% - 60px);
            overflow-y: auto;
            padding: 20px;

            .contact-block {
              display: flex;
              align-items: center;
              padding: 6px 8px;
              border-radius: 100px;
              margin-bottom: 6px;
              transition:
                color 0.3s,
                background-color 0.3s,
                border-color 0.3s,
                height 0.3s,
                width 0.3s;
              cursor: pointer;

              &:hover,
              &:focus {
                background: color-mix(in oklab, var(--fade-grey), white 3%);
              }

              img {
                display: block;
                height: 32px;
                width: 32px;
                min-width: 32px;
                border-radius: var(--radius-rounded);
              }

              .contact-meta {
                margin-inline-start: 12px;

                span {
                  display: block;
                  font-size: 0.9rem;

                  &:first-child {
                    font-family: var(--font-alt);
                    font-weight: 600;
                    color: var(--dark-text);
                  }

                  &:nth-child(2) {
                    font-family: var(--font);
                    color: var(--muted-grey);
                  }
                }
              }
            }
          }
        }
      }
    }

    .inbox-messages {
      position: absolute;
      top: 0;
      inset-inline-start: 20%;
      height: 100%;
      width: 32%;
      background: var(--white);
      border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);

      .header-area {
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
        padding: 0 20px;

        .actions {
          display: flex;
          align-items: center;

          .inbox-search {
            position: relative;
            margin-inline-end: 6px;

            input {
              height: 38px;
              min-width: 220px;
              padding-inline-start: 42px;

              &:focus + .form-icon .iconify {
                color: var(--dark-text);
              }
            }

            .form-icon {
              position: absolute;
              top: 1px;
              inset-inline-start: 4px;
              height: 38px;
              width: 38px;
              display: flex;
              justify-content: center;
              align-items: center;

              .iconify {
                color: var(--placeholder);
                transition: color 0.3s;
              }
            }
          }

          .mobile-menu-action {
            display: none;
          }
        }
      }

      .messages-list {
        position: relative;
        height: calc(100% - 80px);
        width: 100%;
        overflow-y: auto;

        .inbox-message {
          display: flex;
          align-items: stretch;
          border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
          padding: 20px;
          cursor: pointer;

          &:focus-visible {
            outline-offset: var(--accessibility-focus-outline-offset);
            outline-width: var(--accessibility-focus-outline-width);
            outline-style: var(--accessibility-focus-outline-style);
            outline-color: var(--accessibility-focus-outline-color);
          }

          &.is-selected {
            background: color-mix(in oklab, var(--fade-grey), white 4%);
          }

          &.is-unread {
            b {
              font-weight: 600;
            }
          }

          b {
            font-weight: 400;
          }

          .message-meta {
            margin-inline-start: 16px;

            span {
              display: block;

              &.name {
                font-family: var(--font-alt);
                font-weight: 500;
                color: var(--dark-text);
              }

              &.email {
                font-family: var(--font);
                font-size: 0.9rem;
                color: var(--light-text);
              }

              &.subject {
                font-family: var(--font);
                font-size: 0.95rem;
                white-space: nowrap;
                overflow: hidden;
                max-width: 280px;
                text-overflow: ellipsis;
              }
            }
          }

          .pushed {
            margin-inline-start: auto;
            color: var(--muted-grey);
            font-size: 0.9rem;
          }
        }
      }
    }

    .inbox-message-overlay {
      position: absolute;
      top: 0;
      inset-inline-start: 52%;
      height: 100%;
      width: 48%;
      z-index: -1;
      opacity: 0;
      background: var(--white);
      transition: opacity 0.4s;
      display: flex;
      justify-content: center;
      align-items: center;

      &.is-active {
        opacity: 1;
        z-index: 1;
      }

      .loader {
        position: relative;
        height: 60px;
        width: 60px;
      }
    }

    .inbox-message-details {
      position: absolute;
      top: 0;
      inset-inline-start: 52%;
      height: 100%;
      width: 48%;
      transition: all 0.3s; // transition-all test

      .header-area {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
        padding: 0 20px;
        background: var(--white);

        .sender-pic {
          display: block;
          height: 44px;
          width: 44px;
          min-width: 44px;
          border-radius: var(--radius-rounded);
        }

        .message-meta {
          margin-inline-start: 12px;
          line-height: 1.3;

          span {
            display: block;
          }

          .message-title {
            font-family: var(--font-alt);
            font-weight: 600;
            font-size: 1.2rem;
            color: var(--dark-text);
          }

          .sender-email {
            font-family: var(--font);
            color: var(--light-text);
            font-size: 0.95rem;
          }
        }

        .attachments {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-inline-start: auto;
          margin-inline-end: 12px;
          font-size: 1.2rem;

          .iconify {
            color: var(--light-text);
          }

          .iconify {
            color: var(--light-text);
            height: 16px;
            width: 16px;
          }

          span {
            font-family: var(--font);
            font-weight: 600;
            display: block;
            margin-inline-start: 4px;
          }
        }

        .inbox-close-details-mobile {
          display: none;
        }
      }

      .message-wrapper {
        position: relative;
        height: calc(100% - 80px);
        width: 100%;
        overflow-y: auto;
        background: #f4f6fb;

        .message-inner {
          padding: 20px;
          background: var(--white);
          border-bottom: 1px solid var(--fade-grey);

          .message-head {
            display: flex;
            align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--fade-grey);

            .info {
              span {
                display: block;

                &:first-child {
                  font-family: var(--font-alt);
                  font-size: 0.95rem;
                  font-weight: 600;
                  color: var(--dark-text);
                }

                &:nth-child(2) {
                  font-family: var(--font);
                  font-size: 0.9rem;
                  color: var(--light-text);
                }
              }
            }

            .message-actions {
              margin-inline-start: auto;
              display: flex;
              align-items: center;
            }
          }

          .mail-content {
            padding: 40px 60px 30px;
            font-family: var(--font);
          }
        }

        .attachments-list {
          padding: 0 60px 30px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .attachment {
            display: flex;
            align-items: center;
            padding: 6px 6px 6px 16px;
            margin: 0 6px 6px;
            border: 1px solid var(--fade-grey);
            background: var(--white);
            border-radius: 100px;
            cursor: pointer;
            transition: all 0.3s; // transition-all test

            &:hover {
              border-color: var(--secondary);
              box-shadow: var(--light-box-shadow);

              .download-icon {
                transform: rotate(calc(var(--transform-direction) * 360deg));
                background: var(--secondary);
                border-color: var(--secondary);
                box-shadow: var(--secondary-box-shadow);

                .iconify {
                  color: var(--white);
                }

                .iconify {
                  color: var(--white);
                }
              }
            }

            span {
              display: block;
              margin-inline-end: 8px;
              font-size: 0.95rem;
              font-weight: 500;
              color: var(--dark-text);
              transition:
                color 0.3s,
                background-color 0.3s,
                border-color 0.3s,
                height 0.3s,
                width 0.3s;
            }

            .download-icon {
              height: 24px;
              width: 24px;
              border: 1px solid var(--fade-grey);
              border-radius: var(--radius-rounded);
              display: flex;
              justify-content: center;
              align-items: center;
              transition:
                color 0.3s,
                background-color 0.3s,
                border-color 0.3s,
                height 0.3s,
                width 0.3s;

              .iconify {
                font-size: 12px;
                transition: color 0.3s;
              }

              .iconify {
                height: 16px;
                width: 16px;
              }
            }
          }
        }

        .reply-box-wrap {
          position: relative;
          padding: 40px 30px 30px;

          .reply-bubble {
            position: relative;
            padding: 20px;
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 5%);
            border-radius: var(--radius-large);
            background: var(--white);
            width: 100%;

            &::after,
            &::before {
              bottom: 100%;
              inset-inline-start: 6%;
              border: solid transparent;
              content: ' ';
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
            }

            &::after {
              border-color: rgb(255 255 255 / 0%);
              border-bottom-color: var(--white);
              border-width: 16px;
              margin-inline-start: -16px;
            }

            &::before {
              border-color: rgb(237 237 237 / 0%);
              border-bottom-color: #e0e0e0;
              border-width: 17px;
              margin-inline-start: -17px;
            }

            .reply-as {
              display: flex;
              align-items: center;

              img {
                display: block;
                height: 32px;
                width: 32px;
                border-radius: var(--radius-rounded);
              }

              .reply-details {
                margin-inline-start: 12px;

                span {
                  display: block;

                  &:first-child {
                    color: var(--dark-text);
                    font-family: var(--font-alt);
                    font-weight: 600;
                  }

                  &:nth-child(2) {
                    font-family: var(--font);
                    color: var(--light-text);
                  }
                }
              }

              .dropdown {
                margin-inline-start: auto;
              }
            }

            .control {
              position: relative;
              margin-top: 16px;

              .textarea {
                box-shadow: none;
                padding-bottom: 52px;
                border: none;
              }

              .button {
                position: absolute;
                height: 38px;
                bottom: 8px;
                inset-inline-end: 8px;
                background: var(--secondary);
                border-color: var(--secondary);
                color: var(--smoke-white);
                font-weight: 500;

                &:hover,
                &:focus {
                  box-shadow: var(--secondary-box-shadow);
                }
              }
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
1. Inbox action
========================================================================== */

.inbox-action {
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  border-radius: var(--radius-rounded);
  border: 1px solid transparent;
  transition: all 0.3s; // transition-all test

  &:hover {
    border-color: color-mix(in oklab, var(--fade-grey), black 4%);
    box-shadow: var(--light-box-shadow);

    .iconify {
      color: var(--primary);
    }
  }

  &.is-checked {
    border-color: color-mix(in oklab, var(--fade-grey), black 3%);
    box-shadow: var(--light-box-shadow);
  }

  .iconify {
    font-size: 16px;
    color: var(--light-text);
  }

  .iconify {
    padding: 0;
    transition: color 0.3s;
  }
}

/* ==========================================================================
2. Dropdown
========================================================================== */

.inbox-dropdown {
   .button {
    height: 36px;
    width: 36px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none !important;
    border-radius: var(--radius-rounded);
    background: transparent;
    border: 1px solid transparent;

    &:hover,
    &:focus {
      border-color: color-mix(in oklab, var(--fade-grey), black 4%);
      box-shadow: var(--light-box-shadow) !important;
    }

    .iconify {
      padding: 0;
    }

    .iconify {
      height: 16px;
      width: 16px;
      color: var(--light-text);
    }
  }

  .dropdown-menu {
    width: 180px;

    .dropdown-item {
      display: flex;
      align-items: center;
      font-size: 1rem;
      font-family: var(--font);
      margin-bottom: 4px;
      padding-top: 8px;
      padding-bottom: 8px;

      .iconify {
        color: var(--light-text);
      }

      .iconify {
        height: 16px;
        width: 16px;
        color: var(--light-text);
      }

      span {
        margin-inline-start: 12px;
      }
    }
  }
}

/* ==========================================================================
3. Compose Panel
========================================================================== */

.compose-panel {
  position: fixed;
  top: 65px;
  inset-inline-end: 0;
  height: calc(100% - 65px);
  width: calc(48% - 40px);
  background: var(--white);
  border-inline-start: 1px solid var(--fade-grey);
  z-index: 10;
  transform: translateX(calc(var(--transform-direction) * 100%));
  transition: all 0.3s; // transition-all test

  &.is-active {
    transform: translateX(calc(var(--transform-direction) * 0));
  }

  .header-area {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
    padding: 0 20px;

    .panel-title {
      font-family: var(--font);
      font-size: 1.4rem;
      color: var(--dark-text);
    }

    .dropdown {
      margin-inline-start: 6px;
    }

    .inbox-action {
      margin-inline-start: auto;
    }
  }

  .panel-inner {
    position: relative;
    height: calc(100% - 80px);
    width: 100%;
    overflow-y: auto;
    padding: 60px;

    .field-wrap {
      width: 100%;
      margin-bottom: 20px;

      .field {
        position: relative;
        display: flex;
        align-items: center;

        label {
          display: block;
          font-weight: 600;
          font-size: 1.1rem;
          text-align: inset-inline-end;
          color: var(--dark-text);
          margin-inline-end: 20px;
          min-width: 60px;
        }

        .control {
          position: relative;
          width: 100%;

          .compose-input {
            height: 38px;
            font-size: 1.1rem;
          }

          .textarea {
            font-size: 1.1rem;
            box-shadow: none !important;
            padding-bottom: 54px;
          }

          .send-button {
            position: absolute;
            height: 38px;
            bottom: 8px;
            inset-inline-end: 8px;
            background: var(--secondary);
            border-color: var(--secondary);
            color: var(--smoke-white);
            font-weight: 500;

            &:hover,
            &:focus {
              box-shadow: var(--secondary-box-shadow);
            }
          }

          .attacv-button {
            position: absolute;
            height: 38px;
            width: 38px;
            bottom: 8px;
            inset-inline-start: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--white);
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
            border-radius: var(--radius-rounded);
            transition: all 0.3s; // transition-all test

            &:hover {
              box-shadow: var(--light-box-shadow);
              border-color: var(--dark-text);
            }

            .iconify {
              font-size: 16px;
              color: var(--dark-text);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
Dark mode
========================================================================== */

.is-dark {
  .inbox-wrapper {
    .wrapper-inner {
      .inbox-sidebar {
        border-inline-end: none;

        .header-area {
          background: var(--dark-sidebar);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

          .inbox-title {
            color: var(--dark-dark-text);
          }
        }

        .sidebar-inner {
          background: color-mix(in oklab, var(--dark-sidebar), white 4%);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

          .inner-menu {
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

            .compose-button {
              background: var(--primary) !important;
              border-color: var(--primary) !important;
              color: var(--smoke-white) !important;

              &:hover,
              &:focus {
                box-shadow: var(--primary-box-shadow);
              }
            }

            .inbox-menu {
              ul li a {
                &.is-active {
                  background: color-mix(in oklab, var(--dark-sidebar), white 8%);

                  span {
                    color: var(--smoke-white);
                  }

                  .iconify {
                    color: var(--primary);
                  }

                  .tag {
                    background: var(--secondary) !important;
                  }
                }
              }
            }
          }

          .scroll-menu {
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

            .title-wrap {
              h3 {
                color: var(--dark-dark-text);
              }

              .searcv-button,
              .cancel-searcv-button {
                background: none !important;
              }
            }

            .contact-list {
              .contact-block {
                &:hover {
                  background: color-mix(in oklab, var(--dark-sidebar), white 8%);
                }

                .contact-meta {
                  span {
                    &:first-child {
                      color: var(--dark-dark-text);
                    }
                  }
                }
              }
            }
          }
        }
      }

      .inbox-messages {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
        border-inline-start: 1px solid color-mix(in oklab, var(--dark-sidebar), white 12%) !important;

        .header-area {
          background: var(--dark-sidebar);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
        }

        .messages-list {
          background: color-mix(in oklab, var(--dark-sidebar), white 4%);

          .inbox-message {
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

            &.is-selected {
              background: color-mix(in oklab, var(--dark-sidebar), white 8%);
            }

            .message-meta {
              span {
                &:first-child,
                &.subject {
                  color: var(--dark-dark-text);
                }
              }
            }
          }
        }
      }

      .inbox-message-details {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .header-area {
          background: var(--dark-sidebar);
          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

          .message-meta {
            span {
              &:first-child {
                color: var(--dark-dark-text);
              }
            }
          }

          .attachments {
            span {
              color: var(--dark-dark-text);
            }
          }
        }

        .message-wrapper {
          background: color-mix(in oklab, var(--dark-sidebar), white 14%);

          .message-inner {
            background: color-mix(in oklab, var(--dark-sidebar), white 4%);
            border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

            .message-head {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

              .info {
                span {
                  &:first-child {
                    color: var(--dark-dark-text);
                  }
                }
              }
            }

            .attachments-list {
              .attachment {
                background: color-mix(in oklab, var(--dark-sidebar), white 2%);
                border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

                span {
                  color: var(--dark-dark-text);
                }

                .download-icon {
                  border-color: color-mix(in oklab, var(--dark-sidebar), white 8%);

                  .iconify {
                    color: var(--smoke-white);
                  }
                }
              }
            }
          }

          .reply-box-wrap {
            .reply-bubble {
              background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
              border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);

              &::before,
              &::after {
                border-bottom-color: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
              }

              .reply-as {
                .reply-details {
                  span {
                    &:first-child {
                      color: var(--dark-dark-text);
                    }
                  }
                }
              }

              .control {
                .button {
                  background: var(--secondary);
                  border-color: var(--secondary);
                  color: var(--smoke-white);
                }
              }
            }
          }
        }
      }
    }
  }

  .inbox-action {
    &:hover {
      background: color-mix(in oklab, var(--dark-sidebar), white 2%);
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

      .iconify {
        color: var(--primary);
      }
    }
  }

  .inbox-dropdown {
    &:hover {
      .button {
        background: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
      }
    }

    .button {
      background: transparent !important;
      border-color: transparent !important;
    }
  }
}

/* ==========================================================================
4. Media Queries
========================================================================== */

// Media queries
@media (width <= 767px) {
  .inbox-hidden-mobile {
    display: none !important;
  }

  .inbox-messages,
  .inbox-sidebar,
  .inbox-message-details,
  .inbox-message-overlay {
    width: 100% !important;
  }

  .inbox-messages,
  .inbox-sidebar,
  .inbox-message-overlay {
    inset-inline-start: 0 !important;
  }

  .inbox-sidebar {
    transform: translateX(calc(var(--transform-direction) * -100%));
    z-index: 1 !important;
    transition: all 0.3s !important;

    &.mobile-active {
      transform: translateX(calc(var(--transform-direction) * 0)) !important;
    }

    .dropdown {
      display: none !important;
    }

    .inbox-close-sidebar-mobile {
      display: flex !important;
    }
  }

  .inbox-messages {
    .mobile-menu-action {
      display: flex !important;

      .iconify {
        height: 22px;
        width: 22px;
      }
    }

    .check-all-action {
      margin-inline-end: 16px;
    }

    .inbox-message {
      .pushed {
        display: none;
      }
    }
  }

  .inbox-message-details {
    inset-inline-start: 0 !important;
    transform: translateX(calc(var(--transform-direction) * 100%));

    &.mobile-active {
      transform: translateX(calc(var(--transform-direction) * 0));
    }

    .header-area {
      padding: 0 10px !important;

      .sender-pic {
        display: none !important;
      }

      .message-meta {
        .message-title {
          font-size: 1rem !important;
        }

        .sender-email {
          font-size: 0.9rem !important;
        }
      }

      .attachments {
        font-size: 1rem !important;
      }

      .dropdown {
        margin-inline-start: auto !important;
      }

      .inbox-close-details-mobile {
        display: flex !important;
      }
    }

    .message-inner {
      .message-head {
        .info {
          font-size: 0.9rem;
        }
      }

      .mail-content {
        padding: 40px 20px 20px !important;
      }

      .attachments-list {
        .attachment {
          width: 100%;

          .download-icon {
            margin-inline-start: auto !important;
          }
        }
      }
    }

    .reply-box-wrap {
      padding-inline-start: 10px !important;
      padding-inline-end: 10px !important;

      .reply-bubble {
        &::after,
        &::before {
          inset-inline-start: 16% !important;
        }
      }
    }
  }

  .compose-panel {
    width: 100% !important;

    .panel-inner {
      padding: 20px !important;

      .field-wrap {
        margin-bottom: 8px !important;

        .field {
          display: block;

          label {
            text-align: inset-inline-start;
          }

          .textarea {
            max-height: 210px !important;
          }
        }
      }
    }
  }
}

// Tablet portrait
@media only screen and (device-width >= 768px) and (device-width <= 1024px) and (orientation: portrait) {
  .inbox-hidden-mobile {
    display: none !important;
  }

  .inbox-messages,
  .inbox-sidebar,
  .inbox-message-details,
  .inbox-message-overlay {
    width: 100% !important;
  }

  .inbox-messages,
  .inbox-sidebar,
  .inbox-message-overlay {
    inset-inline-start: 0 !important;
  }

  .inbox-sidebar {
    transform: translateX(calc(var(--transform-direction) * -100%));
    z-index: 1 !important;
    transition: all 0.3s !important;

    &.mobile-active {
      transform: translateX(calc(var(--transform-direction) * 0)) !important;
    }

    .dropdown {
      display: none !important;
    }

    .inbox-close-sidebar-mobile {
      display: flex !important;
    }
  }

  .inbox-messages {
    .mobile-menu-action {
      display: flex !important;
    }
  }

  .inbox-message-details {
    inset-inline-start: 0 !important;
    transform: translateX(calc(var(--transform-direction) * 100%));

    &.mobile-active {
      transform: translateX(calc(var(--transform-direction) * 0));
    }

    .header-area {
      padding: 0 10px !important;

      .attachments {
        font-size: 1rem !important;
      }

      .dropdown {
        margin-inline-start: auto !important;
      }

      .inbox-close-details-mobile {
        display: flex !important;
      }
    }

    .message-inner {
      .message-head {
        .info {
          font-size: 0.9rem;
        }
      }

      .mail-content {
        padding: 40px 20px 20px !important;
      }

      .attachments-list {
        .attachment {
          width: 100%;

          .download-icon {
            margin-inline-start: auto !important;
          }
        }
      }
    }

    .reply-box-wrap {
      padding-inline-start: 10px !important;
      padding-inline-end: 10px !important;

      .reply-bubble {
        &::after,
        &::before {
          inset-inline-start: 5% !important;
        }
      }
    }
  }

  .compose-panel {
    width: calc(100% - 80px) !important;

    .panel-inner {
      padding: 60px !important;

      .field-wrap {
        margin-bottom: 8px !important;

        .field {
          display: block;

          label {
            text-align: inset-inline-start;
          }

          .textarea {
            max-height: 210px !important;
          }
        }
      }
    }
  }
}

// Tablet landscape
@media only screen and (device-width >= 768px) and (device-width <= 1024px) and (orientation: landscape) {
  .inbox-hidden-mobile {
    display: none !important;
  }

  .inbox-sidebar {
    width: 32% !important;
    z-index: 1;
  }

  .inbox-messages {
    width: 68% !important;
    inset-inline-start: 32% !important;
  }

  .inbox-message-details,
  .inbox-message-overlay {
    inset-inline-end: 0 !important;
    inset-inline-start: unset !important;
    width: 68% !important;
    transform: translateX(calc(var(--transform-direction) * 100%));
    transition: all 0.3s; // transition-all test

    &.tablet-active {
      transform: translateX(calc(var(--transform-direction) * 0)) !important;
    }
  }

  .inbox-message-details {
    .header-area {
      .dropdown {
        margin-inline-start: auto !important;
      }

      .inbox-close-details-mobile {
        display: flex !important;
      }
    }
  }

  .compose-panel {
    width: 63% !important;
  }
}
</style>
