@use './colors' as c;
@use './transitions' as t;

.context-menu {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid c.$gray-lighter-rgba;
  border-radius: 3px;
  font-size: 12px;
  cursor: default;
  padding: 3px;
  box-shadow: 0 0 3px 0 c.$gray-lighter-rgba,
              0 1px 5px 0 c.$gray-lightest-rgba;
}

.context-menu-dark {
  color: c.$gray-light;
  background-color: rgba(68, 68, 68, 0.97);
}

.context-menu-icon {
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle;
  > svg {
    width: 30px;
    height: 20px;
  }
}

.context-menu-item {
  padding: 2px;
  white-space: nowrap;
  border-radius: 2px;
  transition: background t.$fast t.$ease,
              color t.$fast t.$ease;

  &:hover {
    background: c.$active;
    color: c.$white;
  }
}

.context-menu-hr {
  margin-top: 5px;
  margin-bottom: 5px;
  border: 0;
  border-top: 1px solid c.$gray-lighter-rgba;
}

.play-icon {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 5px;
}

.context-menu-span {
  margin-right: 20px;
  vertical-align: middle;
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
}

.context-menu-thumbnail {
  margin-right: 10px;
  border: 1px solid #888888;
}

.context-menu-thumbnail-inline {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}