sparkletown/sparkle

@import "scss/constants.scss";

.information-left-column-container {
  flex: 0 0 auto;
  position: relative;

  .chevron-icon-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-left: 30px;

    .chevron-icon {
      margin-bottom: 10px;
      transition: all 0.2s linear;

      &--turned {
        transform: rotate(-180deg);
      }
    }
  }

  .left-column {
    z-index: z(left-column);

    position: fixed;
    top: $spacing--xxl * 7;
    width: 70px;

    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: $secondary--live;
    box-shadow: 0 0 30px $content--under;
    border-radius: 0 22px 22px 0;
    cursor: pointer;

    transition: all 0.1s linear;

    &--expanded {
      width: 300px;
      height: auto;
    }
  }

  .left-column__logo {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    object-fit: cover;

    &--expanded {
      width: 100px;
      height: 100px;
    }
  }
}