@import '../scss/init.scss';

.contextualBar {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: $s_gutter / 2;
  padding-right: $s_gutter;
  background: $c_accent;
  color: $c_text_white_primary;

  visibility: hidden;
  opacity: 0;
  transition: 150ms;

  &.is_active {
    visibility: visible;
    opacity: 1;
  }

  &_control {
    display: flex;
    align-items: center;
    padding-right: $s_gutter;
    margin-right: $s_gutter;
    border-right: 1px solid $c_divider_black;

    &_closeButton {
      margin-right: $s_gutter/2;
    }

    &_count {

      display: flex;
      font-size: $s_font_title;

      &_prefix {
        margin-right: $s_gutter / 4;
      }

      &_suffix {
        margin-left: $s_gutter / 4;
      }

      &_prefix, &_suffix {
        display: none;
      }

      @include respondTo_page(md) {
        &_prefix, &_suffix {
          display: block;
        }
      };
    }
  }

  &_actions {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    width: 70%;

    &_item {
      padding-right: $s_gutter;
      &:last-child {
        padding-right: 0;
      }
    }

    &_multiple, &_single {
      display: flex;
      overflow: hidden;
      flex: 1;
      justify-content: flex-end;
      &:empty {
        display: none;
      }
    }

    &_single {
    }

    .overflowMenu_actions_item {
      padding-right: $s_gutter;
    }
  }

  .rwdFlatButton,
  .iconButton {
    @include respondTo_hoverable {
      background-color: rgba(white, 0.15);
    };
  }
}