@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";

.tDropdown {
  margin-left: 0px !important;
  margin-right: 0px !important;

  [role="button"] {
    height: 60px !important;
    border-radius: 6px !important;
    padding: 20px 19px !important;
    font-family: @baseFontBold !important;
    font-size: 24px !important;
    background-color: @COLOR_GRAY03 !important;
    color: @COLOR_WHITE !important;
    margin: 0 !important;

    > div:first-child {
      background-color: transparent !important;
      box-shadow: none !important;
    }

    > div:nth-child(2) > div:nth-child(1) {
      margin-right: 0 !important;
      margin-left: 10px !important;
      font-size: 24px !important;
      width: 24px !important;
      color: @COLOR_WHITE !important;
    }

    &:focus {
      background-color: @PRIMARY_COLOR_RED !important;
    }
  }
}

[id="floatLayer"] {
  --list-background-color: @COLOR_GRAY03;
  --list-item-font-color: @COLOR_WHITE;
  --list-item-focus-background-color: @PRIMARY_COLOR_RED;
  --list-item-focus-font-color: @COLOR_WHITE;
  --list-item-select-border-color: @PRIMARY_COLOR_RED;
  --scroll-track-color: @COLOR_GRAY03;
  --scroll-bar-color: @COLOR_GRAY04;

  > div > div[id] > div:nth-child(2) {
    bottom: unset !important;
    transform: unset !important;

    > div:nth-child(1) {
      //list layout
      padding: 0 !important;
      margin-top: 4px !important;
      box-shadow: none !important;
      background-color: var(--list-background-color) !important;
      border-radius: 6px !important;

      > div {
        padding: 0 !important;
        padding-top: 14px !important;
        height: auto !important;

        > div > div {
          > div {
            padding: 0 15px !important;

            &:focus-within,
            &:focus {
              background-color: var(
                --list-item-focus-background-color
              ) !important;
            }

            > div:nth-child(1) {
              font-family: @baseFontBold !important;
              color: var(--list-item-font-color) !important;
              font-size: 24px !important;
              margin: 0 !important;
              padding: 0 !important;
              height: 60px !important;
              line-height: 60px !important;
              -webkit-margin-start: 0 !important;
              -webkit-inline-start: 0 !important;

              > div:first-child {
                //list item shadow
                background-color: transparent !important;
                box-shadow: none !important;
              }

              > div:nth-child(3) {
                //check icon
                display: none !important;
              }
            }
          }
        }

        > div:nth-child(2) > div {
          // scroll track
          background-color: var(--scroll-track-color) !important;
          width: 4px !important;
          border-radius: 20px !important;

          > div {
            //scroll bar
            background: var(--scroll-bar-color) !important;
            width: 100% !important;
            border-radius: inherit !important;
          }
        }
      }
    }
  }
}
