.zl-large-screen-sidebar {
  z-index: 1020;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 15px 0;
  border-top: 1px solid var(--color-stories-border);
  border-right: 1px solid var(--color-stories-border);
  background: var(--color-white);
  flex-direction: column;

  align-items: center;

  .zl-large-screen-sidebar-element {
    display: flex;
    width: 100%;
    height: 64px;
    margin-bottom: 4px;
    cursor: pointer;

    justify-content: center;
    align-items: center;

    .zl-large-screen-sidebar-element-content {
      display: flex;
      width: 100%;
      height: 44px;
      border-left: 3px solid transparent;
      flex-direction: column;

      justify-content: center;
      align-items: center;

      &:hover {
        .zl-icon {
          color: var(--color-main);
        }

        .zl-icon-font {
          color: var(--color-main);
        }

        .zl-large-sidebar-title {
          color: var(--color-main);
        }
      }
    }

    .zl-large-sidebar-icon.zl-icon {
      width: var(--font-size-22);
      height: var(--font-size-22);
      margin-bottom: 6px;
      color: var(--color-font);
      font-size: var(--font-size-22);
    }

    .zl-large-sidebar-icon.zl-icon-font {
      margin-bottom: 6px;
      color: var(--color-font);
      font-size: var(--font-size-22);
    }

    .zl-large-sidebar-title {
      line-height: 16px;
      color: var(--color-font);
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);
    }

    span {
      color: var(--color-font);
    }

    &:hover {
      span {
        color: var(--color-main);
      }
    }

    .active-icon {
      height: 44px;
      border-left: 3px solid var(--color-main);
      color: var(--color-main);

      .zl-large-sidebar-icon
      , span {
        color: var(--color-main);
      }

      .zl-large-sidebar-title {
        line-height: 16px;
        color: var(--color-main);
        font-weight: var(--font-weight-400);
        font-size: var(--font-size-12);
      }
    }

    .disable-icon {
      color: var(--color-moveable-line);
      cursor: not-allowed;

      .zl-large-sidebar-title {
        color: var(--color-moveable-line);
      }
    }
  }
}