@import 'variables';
@import 'bourbon';

.offline-indicator {
  border-style: solid;
  box-shadow: 2px 4px 5px -3px rgba(0, 0, 0, 0.1), 1px 3px 2px -1px rgba(0, 0, 0, 0.07), 0 3px 1px -2px rgba(0, 0, 0, 0.06);
  height: 48px;
  right: -30px;
  top: 182px;
  width: 30px;

  @include transition(all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
  @include transform(translateX(-4px));
  @include border-right-radius($tab-border-width);
  @include border-left-radius(0);
  @include border-width(0 $tab-border-width 0 0);

  &:hover {
    @include transform(translateX(0));
  }
}

.offline-indicator__button {
  border-radius: 0;
  color: rgba(0, 0, 0, 0.5);
  height: 100%;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 100%;
}

.offline-indicator__icon {
  line-height: 48px;
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;

  &::before {
    font-size: 21px;
  }
}

.offline-alert,
.signin-alert {
  font-size: 14px;
  left: 15px;
  padding-top: 5px;
  top: 15px;

  p {
    line-height: 1.3;
  }
}

.offline-alert {
  height: 210px;
  width: 210px;
}

.signin-alert {
  height: 220px;
  width: 220px;
}
