rf-action-select {
   display: block;

   // use those two variables for changin the size
   --height: 30px;
   font-size: 12px;

   &.dark {
      .select-row {
         background: var(--main_color_contrast_ultra_dark);
         color: white;
         &:hover {
            color: var(--main_color);
         }
      }
      .select-row.first {
         border-color: var(--main_color_contrast_ultra_dark);
      }
      .select-btn {
         background: white;
         color: var(--main_color);
      }
   }

   &.inverted {
      .select-row {
         background: var(--main_color);
         color: white;
         &:hover {
            color: var(--main_color);
         }
      }
      .select-btn {
         background: white;
         color: var(--main_color);
      }
   }

   &.minimum-btn {
      .select-row {
         min-height: 20px;
         padding: 1px 5px;
      }
   }

   &.small-btn {
      .select-row {
         min-height: 20px;
         padding: 1px 5px
      }
   }

   &.round-btn {
      .select-row {
         min-height: 24px;
         padding: 2px 5px;
         &.first {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-color: var(--lightgrey);
         }
         &.first.full{
            border-radius: 10px;
         }
      }

      .select-btn {
         border-top-left-radius: 10px;
         border-bottom-left-radius: 10px;
         border-color: var(--lightgrey);
      }

      .lower-select-container {
         width: max-content;
         min-width: min-content;
         @media (max-width: 768px) {
            top: 0;
         }
      }
   }

   .action-select-xs-handler.rf-btn.rf-btn-inverted{
      margin: 0;
   }

   .select-container.hidden{
      display: none;
   }

   .upper-select-container{
      width: 100%;
      // overflow: auto;
      position: relative;
      min-height: var(--height);
      min-width: 50px;
   }

   .select-row {
      min-height: 20px;
      padding: 5px 5px;
      background: white;
      color: var(--main_color);
      float: right;
      border-radius: 0;

      &:hover {
         background: var(--darkwhite);
      }

      &.first {
         border-bottom-right-radius: 5px;
         border-top-right-radius: 5px;
         border: 1px solid var(--main_color);
         display: flex;
         justify-content: start;
         align-items: center;
         position: absolute;
         top: 0;
         left: var(--height);
         right: 0;
         bottom: 0;
         font-size: 100%;
         min-width: max-content;
      }
      &.first.full{
         border-radius: 5px;
         left: 0;
      }
   }

   .select-btn {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--height);
      height: 100%;
      margin: 0 0 0 0;
      float: left;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background: white;
      color: var(--main_color);
      border: 1px solid var(--main_color);
      &:hover {
         margin: 0 0 0 0 !important;
         border-color: var(--main_color) !important;
      }
      .rf-bars{
         font-size: 65%;
      }
   }

   .lower-select-container {
      width: 100%;
      z-index: 9999;
      position: absolute;
      right: 0;
      top: var(--height);
      overflow: auto;
      background: white;
      border-radius: 10px;
      border: 1px solid var(--midgrey);

      &.inverted{
         top: auto;
         bottom: 28px;
      }

      .inner-select-container {
         width: 100%;
      }

      .bold{
         font-weight: bold;
      }
   }

   .lower-select-row{
      width: 100%;
      min-height: 20px;
      padding: 5px 15px;
      color: var(--grey);
      float: left;
      cursor: pointer;

      &:hover {
         background: var(--darkwhite);
         color: var(--main_color);
      }
   }

   .lower-select-row-icons{
      width: 100%;
      min-height: 20px;
      padding: 10px;
      float: left;
      border-bottom: 1px solid var(--lightgrey);
      .rf-btn{
         font-size: 150%;
         width: min-content;
         float: left;
         margin: 0;
         &:hover{
            margin: 0;
         }
      }
      .right{
         float: right;
      }
   }

   .disabled {
      color: var(--lightgrey);
      cursor: default;

      &:hover {
         background: white;
      }
   }
}