// 패널 배치 집계
.penal-wrap {
  position: fixed;
  top: 200px;
  left: 50px;
  z-index: 999999;
  width: 237px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border: 1px solid #dfdfdf;
  padding: 0 34px 0 10px;
  border-radius: 2px;
  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
    background-size: cover;
  }
  h2 {
    font-size: 12px;
    font-weight: 500;
    color: #3d3d3d;
  }
  .penal-table-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: calc(100% + 2px);
    background-color: #3d3d3d;
    border: 1px solid #3d3d3d;
    padding: 20px;
    .penal-table {
      table-layout: fixed;
      border-collapse: collapse;
      thead {
        th {
          text-align: center;
          background-color: rgba(255, 255, 255, 0.05);
          font-size: 12px;
          font-weight: 500;
          color: #fff;
          border: 1px solid #505050;
        }
      }
      tbody {
        td {
          font-size: 12px;
          color: #fff;
          font-weight: 400;
          text-align: center;
          padding: 0 10px;
          border: 1px solid #505050;
        }
      }
    }
  }
  &.act {
    border: 1px solid #3d3d3d;
    background-color: #3d3d3d;
    h2 {
      color: #fff;
    }
    &::before {
      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
    }
    .penal-table-wrap {
      display: block;
    }
  }
}

// context menu
.context-menu-wrap {
  min-width: 238px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  background: #fff;
  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
  ul {
    padding: 17px 0;
    border-bottom: 1px solid #e9e9e9;
    &:last-child {
      border: none;
    }
    li {
      padding: 4px 30px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 400;
      color: #101010;
      &:hover {
        color: #fff;
        background-color: #0d99ff;
      }
    }
  }
}