#expander {
  position: relative;

  .expander-bar {
    position: absolute;


    background-color: rgb(226, 226, 226);
    opacity: 0.5;
    display: flex;
    text-align: center;
    cursor: pointer;


    &.bottom {
      overflow: hidden;
      padding: 1px 20px;
      width: 60px;
      height: 20px;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;

      .triangle {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 8px solid rgb(50, 50, 50);
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;

        &.expand {
          width: 0;
          height: 0;
          border-bottom: 8px solid rgb(50, 50, 50);
          border-right: 8px solid transparent;
          border-left: 8px solid transparent;
          border-top: 0px solid transparent;
        }
      }
    }

    &.side {
      padding: 20px 1px;
      width: 20px;
      // height: 120px;
      left: -21px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1000;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.is-fold {
        left: 1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }

      .side-triangle {
        width: 0;
        height: 0;
        border-left: 8px solid rgb(50, 50, 50);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 0px solid transparent;


        &.expand {
          width: 0;
          height: 0;
          border-right: 8px solid rgb(50, 50, 50);
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 0px solid transparent;
        }
      }
    }

    &:hover {
      transition: opacity 0.3s ease;
      opacity: 1;
    }





  }
}