@import 'client/common';

#broadcast-notification-holder{
  position:absolute;
  bottom:0;
  width:100%;

  .guitar-center-logo img {
    left: 25%;
    position: relative;
    bottom: 20px;
  }
}

[data-react-class="BroadcastHolder"], [data-react-class="TopMessageHolder"] {
  position:relative;
  min-height: 125px;
  bottom: 60px;
  @include border_box_sizing;

  .broadcast-notification {
    border-width:1px;
    border-color:$ColorScreenPrimary;
    border-style:solid;
    padding:5px 12px;
    height:100%;
    width:100%;
    left:0;
    top:0;
    overflow:hidden;
    @include border_box_sizing;


    &.config {
      border-width:0;
    }

    &.lesson {
      p {
        text-align:center;
        color:$ColorTextTypical;
        margin-bottom:10px;
      }
      .message {
        width:100%;
      }
    }

    &.subscription {
      border-width:0;
      p {
        text-align:center;
        color:$ColorTextTypical;
        margin-bottom:10px;
      }
      .message {
        width:100%;
        font-size:18px;
      }
    }
  }
  .message {
    float:left;
    width:calc(100% - 150px);
    font-size:12px;
  }

  .time {
    font-size:20px;
    color:white;
    font-weight:bold;
  }

  .actions {
    float:right;
    text-align: right;
    vertical-align: middle;
    display:inline;
    height:100%;
    width:150px;
  }

  .actionsAligner {
    display:inline-block;
    vertical-align:middle;
    text-align:center;
  }

  a { display:inline-block; }

  .button-orange {
    font-size:16px;
    position:relative;
    top:8px;
  }

  .not-now {
    font-size:11px;
    top:13px;
    position:relative;
  }
}


.bn-slidedown-enter {
  max-height:0;
  opacity: 0.01;
  transition: max-height .5s ease-in;
}

.bn-slidedown-enter.bn-slidedown-enter-active {
  max-height:60px;
  opacity: 1;
}

.bn-slidedown-leave {
  max-height:60px;
  transition: max-height .5s ease-in;
}

.bn-slidedown-leave.bn-slidedown-leave-active {
  max-height:0;
}