.dialog {
  width: 360px;
  padding: 16px;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      font-size: 20px;
    }
  }
  section {
    display: flex;
    padding: 8px;
    border-radius: 8px;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    background-image: url("../../assets/images/bg-dark.png");
    h2 {
      font-size: 18px;
      font-weight: normal;
      text-align: center;
      margin: 0;
    }
  }
}

.button-group {
  display: flex;
  gap: 4px;
  > button {
    flex: 1;
    border-radius: 10px;
    color: #ed9b40;
    box-shadow: inset 0px 0px 0px 1px #ffffff30;
    background-image: url("../../assets/images/bg-gray.png");
    border-image-source: url("../../assets/images/btn-frame.png");
    border-image-slice: 5;
    border-image-width: 5px;
    border-image-repeat: repeat;
    &.selected {
      background-image: url("../../assets/images/btn-selected-bg.png");
      border-image-source: url("../../assets/images/btn-frame-selected.png");
      box-shadow: inset 0px 0px 0px 1px #a02623;
      border-color: #43100f;
      &:hover {
        background-image: url("../../assets/images/btn-selected-bg.png");
        border-image-source: url("../../assets/images/btn-frame-selected.png");
      }
    }
    &:hover {
      background-image: url("../../assets/images/bg-gray-hover.png");
      border-image-source: url("../../assets/images/btn-frame-hover.png");
    }
  }
}

.toggle {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  > span {
    width: 50%;
    font-size: 16px;
  }
  > .button-group {
    flex-grow: 1;
  }
}
