@import 'style/shared/variables.scss';

.fee-dropdown {
  font-size: 14px;
  position: relative;

  &.custom {
    background-color: $washed-gray;
    padding: 4px;
    border-radius: $medium-border-radius;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .custom-input {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
      height: 24px;
      width: 134px;
      border: none;
      background-color: $washed-gray;
    }

    svg {
      width: 16px;
      height: 14px;
      margin-right: 6px;
    }
  }

  .selector {
    min-width: 150px;
  }

  .content-border {
    z-index: 3;
    
    .dropdown-content {
      .prices {
        .price {
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          line-height: 20px;

          padding: 8px 12px 8px 16px;

          &:hover {
            opacity: 0.8;
          }

          .speed {
            font-weight: 600;
            margin-right: 4px;
          }

          .time {
            color: $dark-gray;
            font-weight: 600;
          }

          .unit {
            margin-left: 4px;
          }
        }
      }
    }
  }
}