sparkletown/sparkle

@import "scss/constants";

.ReactionsBar {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
  align-items: center;
  margin: $spacing--xs 0;
  width: 100%;

  &__mute-button {
    display: flex;
    align-items: center;
    font-size: $font-size--xl;
    cursor: pointer;

    &--disabled {
      cursor: default;
      pointer-events: none;
      color: $lighter-intermediate-grey;
    }
  }

  &__reactions-container {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    margin: $spacing--xs 0;
    width: 100%;
  }

  &__leave-seat-button {
    display: inline-block;
    font-weight: $font-weight--700;
    text-decoration: none;
    border-radius: $border-radius--sm;
    text-align: center;
    font-size: $font-size--sm;
    transition: all 400ms $transition-function;
    border: 1px solid transparent;
    transform: translateY(0);
    cursor: pointer;
    padding: $spacing--xs $spacing--sm;
    background: $content--under;
    color: $content--over;

    &:hover {
      background-color: opaque-white(0.5);
    }
  }

  &__shout-container {
    margin: 0 8px 4px 8px;
    padding: 0 24px 16px 24px;
    width: 100%;

    .shout-form {
      display: flex;

      input {
        margin: 0 8px;
        border-radius: 8px;
        font-size: 1em;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
      }

      .text {
        flex: 4;

        &:disabled {
          cursor: not-allowed;
        }
      }

      .shout-button {
        flex: 1;

        &:disabled {
          cursor: not-allowed;
        }
      }
    }
  }
}