@import 'common/sass/variables';
@import 'common/sass/mixins';

$width: 40px;
$default-opacity: 0.4;

@keyframes send-everything-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: $default-opacity;
  }
}

.SendEverything {
  @include reset-button;
  display: block;
  position: relative;
  height: $input-height-base;
  width: $width;
  margin-left: -$width;
  font-size: 1.4rem;
  border-left: 1px solid #e5ecf3;
  opacity: $default-opacity;
  transition: $transition;
  animation: send-everything-enter 200ms ease 1;
  @include show-tooltip-on-hover;

  &-icon {
    transition: transform 150ms ease;
  }

  &:disabled {
    display: none;
  }

  &:hover {
    color: $brand-primary;
    opacity: 1;

    .SendEverything-icon {
      transform: translateY(-2px);
    }
  }
}