@import 'src/styles/variables';

.wrap {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate($content_width * 0.5 + $gap, 0);
  z-index: 14;

  @media (max-width: $content_width + ($bar_height + $gap) * 2) {
    left: 100%;
    transform: translate(-$bar_height, 0);
  }
}

.button {
  background: $flow_gradient;
  width: $bar_height;
  height: $bar_height;
  border-radius: $bar_height * 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius $radius 0 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  border: none;
  outline: none;

  svg {
    width: 32px;
    height: 32px;
  }

  .lab & {
    background: $info_gradient;
  }
}

.panel {
  background: $content_bg_lighter;
  position: absolute;
  bottom: 0;
  z-index: 1;
  padding-bottom: $bar_height;
  border-radius: $radius $radius 0 0;
  transform: translate(0, 100%);
  transition: transform 250ms 250ms;

  &.active {
    transform: translate(0, 0);
    transition: transform 250ms;
  }
}

.link {
  @include row_shadow;

  height: $bar_height;
  width: $bar_height;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  fill: white;
  color: white;

  svg {
    width: 32px;
    height: 32px;
  }

  &:first-child {
    border-radius: $radius $radius 0 0;
  }
}
