/**
* This is a standalone file that gets included with the assertions menu
* in the user's app html
*/

$border-radius: 4px;

@mixin menu-style {
  background: #fff;
  border: 1px solid #DDD;
  box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.2);
  border-radius: $border-radius;
}

.highlight {
  background: rgba(159, 196, 231, 0.6);
  border: solid 2px #9FC4E7;
  cursor: pointer;
}

.assertions-menu {
  @include menu-style;

  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  z-index: 2147483647;
  width: 175px;

  .header {
    align-items: center;
    background: #07b282;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    color: #fff;
    display: flex;
    padding: 0.5rem 0.7rem;

    .title {
      font-size: 14px;
      font-weight: 600;
    }

    .close-wrapper {
      margin-left: auto;
      margin-top: -2.5px;

      .close {
        font-size: 18px;
        font-weight: 500;

        &:hover, &:focus, &:active {
          cursor: pointer;
          color: #eee;
        }
      }
    }
  }

  .subtitle {
    border-bottom: 1px solid #c4c4c4;
    color: #6b6b6b;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    padding: 0.5rem 0.7rem;

    code {
      font-weight: 600;
    }
  }

  .assertions-list {
    .assertion-type {
      color: #202020;
      cursor: default;
      font-size: 14px;
      padding: 0.4rem 0.4rem 0.4rem 0.7rem;
      position: relative;

      &:first-of-type {
        padding-top: 0.5rem;
      }

      &:last-of-type {
        border-bottom-left-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
        padding-bottom: 0.5rem;
      }

      &:hover {
        background-color: #e9ecef;
      }

      &.single-assertion {
        cursor: pointer;
        font-weight: 600;
      }

      .assertion-type-text {
        align-items: center;
        display: flex;

        .dropdown-arrow {
          margin-left: auto;
        }
      }

      .assertion-options {
        @include menu-style;

        font-size: 14px;
        max-width: 150px;
        overflow: hidden;
        overflow-wrap: break-word;

        .assertion-option {
          cursor: pointer;
          padding: 0.4rem 0.6rem;

          &:hover {
            background-color: #e9ecef;
          }
          
          .assertion-option-value {
            font-weight: 600;
          }
        }
      }
    }
  }
}