@import "../lib.less";

.@{veui-prefix}-region-picker {
  @item-width: 116px;
  @padding-x: 20px;
  @padding-y: 16px;
  width: 740px;
  border: 1px solid @veui-color-gray-5;

  &-section {
    border-bottom: 1px solid @veui-color-gray-5;

    &:last-child {
      border-bottom: none;
    }

    &-title {
      .centered-line(40px);
      padding-left: @padding-x;
    }

    &-content {
      display: table;
    }
  }

  &-branch {
    display: table-row;

    &:hover {
      background-color: @veui-color-gray-8;
    }

    &-title {
      display: table-cell;
      vertical-align: top;
      min-width: @item-width + @padding-x * 2;
      padding: @padding-y @padding-x * 2 @padding-y @padding-x;
      white-space: nowrap;
    }

    &-content {
      display: table-cell;
    }
  }

  &-group {
    float: left;
    margin: @padding-y 0;

    &-title {
      width: @item-width;
      white-space: nowrap;

      .@{veui-prefix}-checkbox {
        width: 100%;
      }

      .@{veui-prefix}-checkbox-label {
        max-width: ~"calc(100% - 24px)";
        padding-right: 10px;
        .ellipsis();
      }
    }

    &-overlay {
      position: relative;
    }

    &-shadow {
      float: left;
      margin: -11px 0 0 -8px;
      padding: 10px 8px;
      border-radius: 2px 2px 0;
      background-color: #fff;
      border-top: 1px solid @veui-color-gray-8;
      z-index: 1;
      .veui-overlay-shadow();

      small {
        margin-left: 10px;
        font-size: @veui-font-size-m;
        color: @veui-font-color-normal;
      }

      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: ~"calc(100% + 8px)";
        height: 10px;
        background-color: #fff;
      }

      &-overlay {
        margin-top: -16px;
      }

      [x-placement*="top"] + &-overlay & {
        &::before {
          top: -15px;
          bottom: auto;
        }

        &::after {
          top: -20px;
        }
      }
      [x-placement*="bottom"] + &-overlay & {
        &::before {
          bottom: -5px;
        }
        &::after {
          bottom: -10px;
        }
      }

      [x-placement*="start"] + &-overlay & {
        &::before {
          left: -8px;
        }

        &::after {
          left: 20px;
        }
      }

      [x-placement*="end"] + &-overlay & {
        &::before {
          right: 0;
        }

        &::after {
          right: 20px;
        }
      }
    }
  }

  &-units {
    display: table;
    background-color: #fff;
    border-top: 1px solid @veui-color-gray-8;
    z-index: 0;
    .veui-overlay-shadow();

    [x-placement*="top"] & {
      margin-top: 0;
      margin-bottom: 10px;
    }

    [x-placement*="bottom"] & {
      margin-top: 10px;
      margin-bottom: 0;
    }

    [x-placement*="start"] & {
      margin-right: 0;
      margin-left: -8px;
    }

    [x-placement*="end"] & {
      margin-right: -8px;
      margin-left: 0;
    }
  }

  &-unit-row {
    display: table-row;
    margin: 10px 8px;
  }

  &-unit {
    display: table-cell;
    padding: 10px 20px 10px 8px;
    .ellipsis();

    &:first-child {
      padding-left: 20px;
    }

    &-row:first-child & {
      padding-top: 20px;
    }

    &-row:last-child & {
      padding-bottom: 20px;
    }
  }
}