.skin-popover-wrapper {
  .amos-popover-content {
    padding: 0;

    .skin-scroll-wrapper {
      width: 28rem;
      height: 30rem;
      padding: 0.5rem 0 0.5rem 1rem;
    }
  }
}

.skin-wrapper {
  width: 26rem;
  border-radius: 4px;
  background-color: white;

  &.skin-active {
    transform: scale(1);
  }

  .skin-header {
    height: 1.5rem;
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;

    h3 {
      margin: 0;
    }
  }

  .skin-switch {
    margin: 0.5rem 0;

    .switch-tip {
      margin: 0 1rem 0 0;
    }
  }

  .skin-content {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;

    .skin-item {
      width: 8rem;
      height: 7rem;
      margin: 0.5rem 0;
      position: relative;

      img {
        cursor: pointer;
        vertical-align: middle;
        width: 8rem;
        height: 5rem;
      }

      .skin-name {
        width: 8rem;
        height: 1.6rem;
        background-color: #009587;
        color: white;
        text-align: center;
      }

      .skin-footer {
        height: 0.2rem;

        span {
          float: left;
          width: 25%;
          height: 100%;
        }
      }

      .skin-check {
        display: none;
        position: absolute;
        width: 8rem;
        height: 7rem;
        top: 0;
        text-align: center;
        color: white;
        line-height: 72px;
        cursor: pointer;
      }

      .skin-use {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;

        .amosicon {
          margin-right: 0.3rem;
        }
      }

      &.normal:hover {
        .skin-check {
          display: block;
        }
      }
    }
  }
}
