.offcanvas-apps {
  border: 1px solid var(--border-subtle-1);
  background-color: var(--background-default);
  width: 16vw;

  > .MuiPaper-root {
    width: 16vw;

    > .header {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      gap: 16px;

      > .header-apps-title {
        @include label-large-1;
        color: var(--text-primary);
      }

      .header-profile-apps {
        display: none;
      }
    }

    > .body {
      > .header-apps-buttons {
        display: none;
      }

      > .title {
        @include tag-medium-1;
        color: var(--text-tertiary);
        padding: 16px;
        border-top: 1px solid var(--border-subtle-1);
      }

      > .item {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 8px 20px;
        cursor: pointer;

        &:hover {
          background-color: var(--layer-hover-1);
        }

        > .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--layer-field-hover);
          border-radius: var(--radius-100);
          padding: 8px;

          > .ds-icon {
            color: var(--icon-on-color-accent);
          }
        }

        > img {
          width: 32px;
          height: 32px;
        }

        > .title-app {
          @include label-medium-1;
          color: var(--text-primary);
        }

        > .options {
          display: flex;
          display: flex;
          align-items: center;
          margin-left: auto;
          gap: 4px;

          > .ds-tag {
            margin-right: 4px;
          }
        }
      }
    }

    > .footer {
      border-top: 1px solid var(--border-subtle-1);
      display: none;
    }
  }
}

@media (max-width: 1366px) {
  .offcanvas-apps,
  .offcanvas-apps > .MuiPaper-root {
    width: 26vw;
  }
}

@media (max-width: 1024px) {
  .offcanvas-apps,
  .offcanvas-apps > .MuiPaper-root {
    width: 30%;

    .body {
      .icon-open {
        display: none;
      }
    }
  }
}

@media (max-width: 768px) {
  .offcanvas-apps,
  .offcanvas-apps > .MuiPaper-root {
    width: 40%;

    .body {
      .icon-open {
        display: none;
      }
    }
  }
}

@media (max-width: 767px) {
  .offcanvas-apps,
  .offcanvas-apps > .MuiPaper-root {
    width: 80%;

    .header {
      padding: 4px 8px;

      .header-profile-apps {
        display: block;
        margin-left: auto;

        > .profile-container {
          display: flex;
        }
      }
    }

    .body {
      .icon-open {
        display: none;
      }
    }

    .footer {
      margin-top: auto;
      display: block;

      > .header-apps-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 8px 16px;
      }
    }
  }
}