@import 'src/styles/variables';

.show_symbol_wrapper {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.show_symbol {
  --temp-font: var(--font-s);
  --temp-width: 30px;
  --temp-height: 40px;
  user-select: none;

  &_s {
    --temp-font: var(--font-xxs);
    --temp-width: 20px;
    --temp-height: 30px;
  }
}

@media (max-width: 900px) {
  .show_symbol {
    --temp-width: 24.5px;
    --temp-height: 33px;
  }
}

.show_symbol {
  font-size: var(--temp-font);
  position: relative;

  display: inline-block;
  width: var(--temp-width);
  height: var(--temp-height);
  padding: 0;
  margin: 0 var(--space-xxs) 0 0;

  vertical-align: top;
  text-transform: capitalize;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  line-height: var(--temp-height);
  transform: rotateY(180deg);

  // border: 1px solid var(--color-border);
  color: var(--color-black);
  background-color: var(--color-white);

  &_hide {
    animation-name: show_symbol;
    animation-duration: 1s;
  }

  &_bg {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    height: 100%;

    cursor: pointer;
    background-color: var(--color-black);

    &_hide {
      // pointer-events: none;
      animation-name: show_symbol_bg;
      animation-duration: 0.4s;
    }
  }
}

.show_symbol_hide,
.show_symbol_bg_hide {
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes show_symbol {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0);
  }
}

@keyframes show_symbol_bg {
  from {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
