.dxbs-gridview {
  .card {
    .dxbs-grid-header-container {
      @extend %table-header, %table-variation;

      background-color: transparent;
    }

    ~ div {
      @extend %table-content, %table-variation;

      table {
        tr {
          td {
            height: size(get("devexpress.element.table.td.height"));
            border: none;
            border-top: size(1px) solid #{get("devexpress.element.table.td.border-color")};
            padding: 0 size(10px);

            &.table-active {
              background-color: var(--primary-300) !important;
              color: var(--neutral-900) !important;
            }

            button {
              @extend %#{get("devexpress.element.table.button.extend")};
              @extend %size-small;
            }
          }
        }
      }
    }

    table {
      tr {
        th {
          height: size(get("devexpress.element.table.th.height"));
          border: none;
          padding: 0 size(10px);

          &:hover {
            background-color: var(--basic-500);
          }

          a {
            color: var(--neutral-900);
            font-weight: bold;
            font-size: 14px;
            line-height: 18px;
          }

          button.dxbs-sort-order-indicator {
            background-color: transparent;
            position: relative;

            span.oi {
              width: size(14px);
              height: size(14px);
              position: absolute;
              right: 0;
              top: calc(50% - 7px);

              &::before {
                left: 0;
                width: 100%;
                height: 100%;
              }

              &.oi-arrow-bottom {
                &::before {
                  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuOTk5OTIgMy41QzMuMDkwMiAzLjUgMy4xNjgzMiAzLjQ2NzAxIDMuMjM0MjkgMy40MDEwNEw1LjU2NzYzIDEuMDY3NzFDNS42MzM2IDEuMDAxNzQgNS42NjY1OCAwLjkyMzYxMSA1LjY2NjU4IDAuODMzMzMzQzUuNjY2NTggMC43NDMwNTYgNS42MzM2IDAuNjY0OTMxIDUuNTY3NjMgMC41OTg5NThDNS41MDE2NSAwLjUzMjk4NiA1LjQyMzUzIDAuNSA1LjMzMzI1IDAuNUgwLjY2NjU4NUMwLjU3NjMwNyAwLjUgMC40OTgxODIgMC41MzI5ODYgMC40MzIyMSAwLjU5ODk1OEMwLjM2NjIzOCAwLjY2NDkzMSAwLjMzMzI1MiAwLjc0MzA1NiAwLjMzMzI1MiAwLjgzMzMzM0MwLjMzMzI1MiAwLjkyMzYxMSAwLjM2NjIzOCAxLjAwMTc0IDAuNDMyMjEgMS4wNjc3MUwyLjc2NTU0IDMuNDAxMDRDMi44MzE1MiAzLjQ2NzAxIDIuOTA5NjQgMy41IDIuOTk5OTIgMy41WiIgZmlsbD0iIzUwNTA1MCIvPgo8L3N2Zz4K");
                  -webkit-mask-repeat: no-repeat;
                  -webkit-mask-position: center;
                  display: inline-block;
                  content: "";
                  position: absolute;
                  background: currentColor;
                }
              }

              &.oi-arrow-top {
                &::before {
                  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuOTk5OTIgMC41QzMuMDcyMTQgMC41IDMuMTM2NTggMC41MjExMTEgMy4xOTMyNSAwLjU2MzMzM0wzLjIzNDI5IDAuNTk4OTU4TDUuNTY3NjMgMi45MzIyOUM1LjYzMzYgMi45OTgyNiA1LjY2NjU4IDMuMDc2MzkgNS42NjY1OCAzLjE2NjY3QzUuNjY2NTggMy4yNTY5NCA1LjYzMzYgMy4zMzUwNyA1LjU2NzYzIDMuNDAxMDRDNS41MTQ4NSAzLjQ1MzgyIDUuNDU0MjkgMy40ODU0OSA1LjM4NTk2IDMuNDk2MDRMNS4zMzMyNSAzLjVIMC42NjY1ODVDMC41NzYzMDcgMy41IDAuNDk4MTgyIDMuNDY3MDEgMC40MzIyMSAzLjQwMTA0QzAuMzY2MjM4IDMuMzM1MDcgMC4zMzMyNTIgMy4yNTY5NCAwLjMzMzI1MiAzLjE2NjY3QzAuMzMzMjUyIDMuMDk0NDQgMC4zNTQzNjMgMy4wMyAwLjM5NjU4NSAyLjk3MzMzTDAuNDMyMjEgMi45MzIyOUwyLjc2NTU0IDAuNTk4OTU4QzIuODMxNTIgMC41MzI5ODYgMi45MDk2NCAwLjUgMi45OTk5MiAwLjVaIiBmaWxsPSIjNTA1MDUwIi8+Cjwvc3ZnPgo=");
                  -webkit-mask-repeat: no-repeat;
                  -webkit-mask-position: center;
                  display: inline-block;
                  content: "";
                  position: absolute;
                  background: currentColor;
                }
              }
            }
          }
        }

        td {
          &.table-active {
            background-color: var(--primary-300) !important;
            color: var(--neutral-900) !important;
          }
        }
      }

      .dxbs-form-control {
        background-color: var(--white) !important;
      }
    }
  }
}
