#file-browser {
  data-url {
    display: none;
  }

  .tile {
    &[storageType="notification"] {
      background-color: rgb(153, 153, 255);
      background-color: var(--primary-color);
      color: rgb(255, 255, 255);
      color: var(--primary-text-color);
      height: 40px;
      text-align: center;

      .icon {
        display: none;
        content: "";
      }
    }

    .icon {
      position: relative;
      color: rgb(65, 85, 133);

      &[storageType]::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: attr(storageType);
        transform: translate(-50%, -50%);
        color: rgb(255, 255, 255);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      &.clearclose {
        color: currentColor;
        font-size: 1.2rem;
      }

      &.folder {
        color: rgb(206, 206, 53);

        &.user-added-storage {
          color: rgb(53, 101, 206);
        }
      }

      &.code {
        color: rgb(79, 155, 79);
      }
    }
    &.symlink {
      .icon {
        position: relative;
        color: var(--link-text-color);
        &::after {
          content: "🔗";
          position: absolute;
          bottom: 13px;
          right: 10px;
          font-size: 0.4em;
          color: inherit;
        }
      }

      .text {
        color: var(--link-text-color);
        &::after {
          content: " (symlink)";
          font-size: 0.8em;
          color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
        }
      }
    }
  }

  .info {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: rgba($color: #000000, $alpha: 0.1);
  }

  #list {
    height: calc(100% - 60px);
    overflow-y: auto;

    .tile {
      &[disabled] {
        .text {
          opacity: 0.5;
        }
      }

      &[read-only] {
        .text::after {
          content: "Read only";
          font-size: 0.6em;
          color: rgb(255, 255, 255);
          background-color: rgb(62, 100, 138);
          border-radius: 4px;
          padding: 5px;
          margin: auto 15px;
        }
      }
    }
  }
  .selection-header {
    display: flex;
    align-items: center;
    padding: 5px;
    background: var(--primary-color);
    color: var(--primary-text-color);
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 10px;

    .selection-count {
      font-size: 0.9em;
    }
  }
}
