@import '~scss/variables';
.wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.left {
  flex: 1;
  display: flex;
  padding: 0px 12px;
  :global {
    .icon {
      margin-left: 8px;
    }
  }
}
.isolate {
  margin-left: 15px;
  color: $dark-color01;
}
.isolatetitle {
  font-weight: 600;
  color: $dark-color07;
}

.toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  margin-right: 20px;
  padding: 0 20px;
  border-radius: 16px;
  box-shadow: 0 8px 16px 0 rgba(54, 67, 92, 0.36);
  border: solid 1px $dark-color06;
  background-color: $dark-color06;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.toggleop {
  position: relative;
  height: 4px;
  border-radius: 2px;
  width: 32px;
  margin-left: 8px;
  background-color: #fff;
  cursor: pointer;
  &::after {
    position: absolute;
    left: 100%;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 41, 27, 0.08);
    transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    content: ' ';
    transform: translateX(calc(-100% + 6px)) translateY(calc(-50% + 2px));
  }
}
.closed {
  color: $light-color08;
  & > :last-child {
    background-color: $light-color08;
    &::after {
      left: 0px;
      background-color: $light-color08;
      transform: translateX(0) translateY(calc(-50% + 2px));
    }
  }
}
