/**
 * Copyright (c) 2020 Open Assessment Technologies SA
*/
@import 'inc/bootstrap';

.action-bar {

  .shortcuts-list-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
    background: rgba(0,0,0,0.5);
    z-index: 10001;

    .shortcuts-list {
      width: auto;
      min-width: 400px;
      height: auto;
      min-height: 300px;
      padding: 30px !important;
      color: $textColor !important;
      text-shadow: none !important;
      position: relative;
      background-color: $uiGeneralContentBg;
      border: 1px solid $uiGeneralContentBorder;

      .shortcuts-list-description {
        width: 450px;
      }

      .shortcuts-list-title {
        font-size: 24px;
        margin-top: 0;
      }

      .shortcuts-group-title {
          font-size: 18px;
          margin-top: 20px;

          &:focus {
              outline: 3px solid $actionLinkColor;
              outline-offset: 3px;
          }
      }

      .shortcuts-group-list {
          list-style: none;
          margin: 0;
          padding: 0;

          .shortcut-item {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            float: none;
            margin: 0;

            .shortcut-item-action,
            .shortcut-item-shortcut {
                -ms-flex : 0 1 50%;
                -webkit-flex: 0 1 50%;
                flex: 0 1 50%;
                margin: 0;
                text-align: center;
            }

            .shortcut-item-action {
                text-align: left;
            }
          }
      }

      .btn-close {
          background-color: transparent;
          box-shadow: none;
          height: 20px;
          padding: 0;
          position: absolute;
          right: 12px;
          top: 10px;
          width: 20px;

          .icon-close {
              color: $textColor;
              font-size: 20px;
              padding: 0;
          }

          &:focus {
              outline: 3px solid $actionLinkColor;
              outline-offset: 3px;
          }
      }
    }
  }
}