// third party imports
$ember-basic-dropdown-content-z-index: 10000;
@import "ember-basic-dropdown";

.c-toggle-box__dropdown {
  padding: 16px;
}

.c-toggle-box__label {
  cursor: pointer;
}

.c-toggle-box__label:before {
  width: 0;
  height: 0;
  background-color: rgb(var(--color-white));
  transform: translateY(20px);
  border: 12px solid transparent;
  border-bottom-color: white;
  bottom: -15px;
  right: -5px;
}

.c-toggle-box.this-is-active .c-toggle-box__label:before {
  transform: translateY(0);
}

.c-toggle-box--share {

  .c-toggle-box__dropdown {
    width: 115px;
    margin-right: 23px;
  }
}

.c-toggle-box__dropdown.ember-basic-dropdown--transitioning-in {
  will-change: transform, opacity;
  animation: scale-fade-in .2s ease-out;
}

.c-toggle-box__dropdown.ember-basic-dropdown--transitioning-out {
  will-change: transform, opacity;
  animation: scale-fade-in .2s ease-out reverse;
}

@keyframes scale-fade-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}