@use "variables";

berta-shop {
  .setting-group {
    > .settings {
      .subgroup:not(:first-child) {
        .setting {
          h4 {
            border-top: 1px solid variables.$grey-10;
            padding-top: 1.3em;
          }
        }
      }
    }

    berta-shop-products {
      h4 {
        font-weight: bold;
        padding-bottom: 1em;

        &.is-tag {
          &:before {
            content: "- ";
          }
        }
      }
    }
  }
}

berta-shop-products,
berta-shop-orders {
  display: block;

  p {
    display: flex;
    font-size: variables.$input-font-size;
    justify-content: space-between;

    > span {
      border-left: 1px solid variables.$grey-1;
      box-sizing: border-box;
      color: variables.$grey-40;
      margin-left: 1em;
      padding-left: 0.75em;
      width: 50%;
    }
  }
}

berta-shop-orders {
  .setting {
    &:not(:last-child) {
      border-bottom: 1px solid variables.$grey-10;
    }
  }
}

berta-shop-products {
  .product {
    &:not(:last-child) {
      border-bottom: 1px solid variables.$grey-10;
      margin-bottom: 1.3em;
    }
  }

  .setting.bt-is-empty + .setting {
    .is-tag {
      border-top: 0;
      padding-top: 0;
    }
  }
}

.bt-sh-region {
  margin: 1.3em 0;

  &:first-child {
    margin-top: 0.5em;
  }

  &:not(:first-child) {
    .header {
      border-top: 1px solid variables.$grey-10;
      padding-top: 2.5em;
    }
  }

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

    berta-inline-text-input {
      font-size: variables.$input-font-size;
      font-weight: bold;
    }

    input {
      background-color: transparent;
      border: 0;
      font-family: AvenirNext, Helvetica, Arial, sans-serif;
      font-size: 1em;
      font-weight: bold;
      outline: none;
      padding: 0;
      transition: color 0.2s;

      &:focus {
        color: variables.$berta-accent;
      }
    }

    .edit-icon {
      cursor: pointer;
      margin-left: 0.15em;
      max-height: 0.85em;

      .icon {
        transition: fill 0.2s;
      }

      &:hover {
        .icon {
          fill: variables.$berta-accent;
        }
      }
    }

    button {
      background: none;
      border: 0;
      color: variables.$black;
      cursor: pointer;
      margin-left: 1em;
      padding: 0;
      transition: color 0.2s;

      svg {
        path {
          fill: variables.$black;
          transition: fill 0.2s;
        }
      }

      &:hover,
      &.active {
        color: variables.$berta-accent;

        svg {
          path {
            fill: variables.$berta-accent;
          }
        }
      }

      &.delete {
        &:hover,
        &.active {
          svg {
            path {
              fill: variables.$error-color;
            }
          }
        }
      }
    }
  }

  h4 {
    border-top: 0;
    padding-top: 0;
  }

  .costs-label {
    font-size: variables.$input-font-size;
  }

  .bt-sh-regional-cost {
    .input-row {
      .button {
        min-width: 30%;
      }
    }
  }
}

.bt-sh-region-add {
  h4 {
    font-weight: bold;
    padding-bottom: 0.5em;
  }

  &:not(:first-child) {
    h4 {
      padding-top: 2.5em;
    }
  }

  .input-row {
    .button {
      min-width: 30%;
    }
  }
}

berta-shop-orders {
  .setting:not(:last-child) {
    padding-bottom: 1em;
  }

  p {
    > span {
      border-left: 0;
      color: variables.$black;
      padding-left: 0;
    }
  }
}
