@import '~tc-ui/src/styles/tc-includes';

.readonly-wrapper {
  :global(input.tc-file-field__inputs) {
    display: none;
  }
}

.readonly-value {
  color: $tc-gray-60;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-bottom: 2 * $base-unit;
  padding: 0 2 * $base-unit;
  width: 100%;
}


:global {
  .phone-input-container {
    position: relative;

    .tc-file-field__inputs {
      padding-left: 106px;
    }

    .input-container {
      position: relative;
    }

    .dropdown-wrap {
      position: absolute;
      bottom: 1px;
      left: 1px;
      height: 28px;
      background: #D7D3D0;
      width: 100px;
      border-radius: 0 3px 3px 0;

      .dropdown-wrap {
        top: 0;

        .dropdown-menu-list {
          max-height: 300px;
          overflow-y: scroll;

          li {
            white-space: nowrap;

            &.selected {
              background-color: lightgray;
            }
          }
        }

        .dropdown-menu-header {
          color: #FFFFFF;
          font-size: 13px;
          font-weight: 400;
          text-align: center;
          height: 100%;
          width: 100%;

          .arrow {
            transform: scaleY(-1);
            margin-top: -5px;
          }
        }

        .Dropdown {
          width: auto;
          margin-left: -150px;
          margin-top: 30px;
          color: black;
          text-align: center;
        }
      }
    }
  }

}