.component-coding {
  height: 98%;
  background-color: #ffffff;
  padding: 17px 19px 0 24px;

  .header {
    display: flex;
    justify-content: space-between;

    .handle-row {
      .handle-row-item {
        display: flex;
        align-items: center;
      }
    }
  }

  .code-iframe {
    height: 90%;

    .code-iframe-handle {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      background-color: #2c2c2c;
      border-top-left-radius: 7px;
      border-top-right-radius: 7px;

      .code-iframe-handle-left {
        color: #ffffff;

        .align {
          display: flex;
          align-items: center;
          padding: 5px 8px;

          &:hover {
            cursor: pointer;
            background-color: #474748;
          }
        }
      }

      .code-iframe-handle-right {
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          cursor: pointer;
          background-color: #474748;
        }
      }
    }
  }
}